Grow your CSS skills. Land your dream job.

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

  • # December 29, 2011 at 2:52 pm

    I read Ethan Marcotte’s book on Responsive Web Design but something that still isn’t clear to me is when to use px vs. % for margins and padding on elements. If any of you have the book, on page 37 there is an example where he uses:


    .article {
    padding: 40px 8.48056537%
    }

    When is it appropriate to use PX vs. %? I am confused about using the combination of the two on one element.

    # December 29, 2011 at 3:01 pm

    that is px for top and bottem and % for left and right. Meaning the width is adjustable and the height will be a fixed height. Common for responsive web design, but you can also have the height adjust as well by using %…good for keeping content above the fold for different size browsers.

    # December 29, 2011 at 3:41 pm

    How could it be a fixed height if it’s responsive though?

    # December 29, 2011 at 3:44 pm

    why not? mobile browsers scroll also so height is not that much as an issue as width of a device.

    # December 29, 2011 at 3:47 pm

    @mikes02

    It can have a fixed width, but a responsive width. For example:

    #element {
    padding:20px 15%;
    }

    The height will stay the same but the width will change as you resize the page

    # December 29, 2011 at 3:49 pm

    As far as when to use px, % or em, it all depends on the situation for me and exactly how responsive i want the particular site to be.

    # December 29, 2011 at 4:29 pm

    From what I understand, I set the width via percentage, I don’t touch the height at all, so let’s say I have a 500px width div inside of a 900px container, if I understand correctly the percentage would be:


    #sample-div
    {
    width: 55.55555555555556%; /* 500/900 = 0.5555555555555556 */
    }

    But then if I want to add 30px of padding to that div, according to the box model the div would be 440px so the new math would be:


    #sample-div
    {
    width: 48.88888888888889% /* 440/900 = 0.4888888888888889 */
    }

    So if I wanted to have 30px of padding all the way around the div? would it be


    #sample-div
    {
    width: 48.88888888888889% /* 440/900 = 0.4888888888888889 */
    padding: 30px 6.81818181818182%; /* 30/440 = 0.0681818181818182 */
    }

    or would it be percentage all the way around?


    #sample-div
    {
    width: 48.88888888888889% /* 440/900 = 0.4888888888888889 */
    padding: 6.81818181818182%; /* 30/440 = 0.0681818181818182 */
    }
    # December 29, 2011 at 5:06 pm

    **
    Comment removed because there wasn’t really any need and this is a place of love, bunnies peace and other assorted furry animals. Thanks! :D

    - Robskiwarrior
    **

    # December 29, 2011 at 6:30 pm

    I think you may be over thinking it just a little bit…simple is better, don’t make your life any harder than it has to be…why not just use some media queries to save your self all of that trouble? or do you HAVE to have a completely fluid responsive design?

    # December 29, 2011 at 6:37 pm

    I suppose it doesn’t have to be completely fluid, I was just trying that route out, but in the interest of time on this project you may be right in just using media queries to deliver different styles at the break points.

    # December 29, 2011 at 9:16 pm

    For the record though, I am looking to find a better understanding of percetage based margins and paddings on fluid layouts, if possible, based on what I posted above.

    # January 1, 2012 at 11:06 pm

    I’m with you mikes02. My brain is a bit foggy on this responsive stuff too. I want to make my designs as fluid as possible, so that I’m not making a bunch of different layouts with media queries.

    # October 11, 2012 at 12:24 pm

    I’m also a little bit confused about height. I’ve been doing some of the mixed height-with-px-width-with-percentage business… but I have a situation where I want something absolutely fixed a certain percentage below an image that is resizing. I will probably just use media queries… but was hoping there was a more dynamic way to do this.

    # October 11, 2012 at 1:04 pm

    Percentage doesn’t work for HEIGHTS.

    Any percentage is ALWAYS a percentage of the page WIDTH.

    # October 11, 2012 at 5:56 pm

    @Paulie_D Hmm, not sure how accurate that last statement is? That is only true if there is no parent element with a width set.

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

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