Responsive Web Design: When to use px vs. % on margins and padding?

[Paulie_D]

I think you will find, for the most part, that responsiveness rarely relates to height.

Elements don’t tend to change their heights to any great extent. If you wanted some text below a responsive image, I would use pixels rather than % or ems…much easier to understand.

If they need adjusting re viewport widths then media queries are your friend….which was the OP’s first conclusion. :)

[wootfox]

I made this (http://codepen.io/wootfox/pen/LHohF) to help explain how I determine when to use px vs % for paddings/margins. (Have a look at the details for the description).

Hope this is helpful (I know I’m posting this at least a year after the thread was started…).[code pen](http://codepen.io/wootfox/pen/LHohF) to help explain how I determine when to use px vs % for paddings/margins. (Have a look at the details for the description).

Hope this is helpful (I know I’m posting this at least a year after the thread was started…).

[CrocoDillon]

> because the padding/margin value is related to the font-size

Why not use em then? It works equally well with `box-sizing: border-box`. Didn’t read the rest of this thread but I think sometimes padding/margin in percentages makes sense, for example if you like some room to breath on big screens, but don’t want to waste too much pixels on small screens.

[djowinz]

@CrocoDillon EM is relative to the font-size of the website, in extensive applications or large sites with lots of data its best to stray away from using EM’s. The document relative height will change according to the page being loaded therefore everything would carry an inconsistent feel. Sure you could avoid away from this early in the beginning but then every other person supporting must use the same mindset as you and if you haven’t already figured this out, very rarely do people do anything just like you would. Stick with media queries and % for fluid layouts.

[CrocoDillon]

I was referring to the Pen of the previous comment, where he mentions padding and margin related to font-size. That’s what ems are for, px is not related to font-size.

Sure in a team you have to be consistent with existing conventions, but working alone you have the luxury of always using best practices and I think you should.

[robahas]

I feel like responsiveness is often defined and explained by designers who do both the layout and apply css to it. In that “perfect world” it’s possible to say that responsive sites should never use height definition. But when you are handed a psd done by a designer (and the customer wants it “just like that”) you are out of luck. For example, I often need to place images on top of each other, with the second image at x,y coordinates over the first. The only way to keep this responsive that I have figured out (without setting height) is to use a transparent png that makes up the requisite vertical space. Obviously not ideal. Of course, if you are dealing with a template with a variable length due to varying content, you can’t count on height percentage. I don’t yet have a good solution to this. I wonder if one could use javascript to read the variable height of the container and then translate that into a ratio of height that would be consistent?

Any thoughts?

[weeraffy]

@robahas I believe one of the gaps of CSS3 is not grabbing the opportunity to have expressions as variables.

[TSS]

And WHY on earth do we see so many percentiles run out the millionth place. I always use 10 or 15 or whatever. I never use .0681818181… It makes no sense!

[Author]

Posts