Grow your CSS skills. Land your dream job.

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

  • # 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 4:58 am

    @joshuanhibbert You are right. I ‘over-spoke’.

    # 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

    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?

    # July 17, 2013 at 4:45 am

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

    TSS
    # August 7, 2013 at 1:29 pm

    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!

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".