Responsive Web Design: When to use px vs. % on margins and padding?
Anonymous# October 12, 2012 at 4:02 am
I don’t use heights very often, but will use padding/margin to adjust height. I use % and px for top/bottom margin/padding and things work just fine. % gives a more proportional look, whereas px gives a more predictable look.# October 12, 2012 at 9:09 am
Check this definition: https://github.com/csswizardry/CSS-Guidelines#layout
I think this guy is right. An element should never contain a height property. Only when it’s predefined (like an icon or a picture that needs a particular height).
Thereby I prefer to use em’s or % instead of pixels to make everything flexible. Although height isn’t always that easy to define in paddings or margins.
In using “height” in paddings or margins, you should use % instead of px, in case your website is responsive. Because the big deal about responsive is: it’s responsive. It should be responsive, so make it responsive. Pixels are not responsive.# October 12, 2012 at 9:49 am
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. :)# May 31, 2013 at 7:09 am
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…).# May 31, 2013 at 8:03 am
> 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.# June 4, 2013 at 2:44 pm
@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.# June 4, 2013 at 3:02 pm
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.# July 11, 2013 at 12:45 pm
You must be logged in to reply to this topic.