Grow your CSS skills. Land your dream job.

Padding, what are you doing? Padding! NO! STAHP!

  • # December 6, 2012 at 4:22 am

    Hi,
    I’ve been front ending for a couple of years now and I always find this situation where I want an element to be an exact number of pixels and have some exact padding.
    Some time ago I used to set the width of the element MINUS the padding * 2 and that worked. Then I got tired of calculating and started adding an inner div, so I could set the width of the parent easily and set the padding to the inner element, but this also looks like a crappy solution, so I was wondering how you guys handle these situations.
    I know about box-sizing: border-box but I don’t want to use it due to browser inconsistencies.

    Here’s a fiddle to show the problem and my usual solution (case 2)

    http://codepen.io/joe/pen/boABp

    Thanks and bye :)

    # December 6, 2012 at 4:27 am

    My way to go is the following:
    * Box-sizing: border-box on all elements *, *:after, *:before { box-sizing: border-box; }
    * Polyfill for IE7 if support required (https://github.com/Schepp/box-sizing-polyfill)

    I do that in most projects, it works absolutely fine.

    # December 6, 2012 at 5:34 am

    Yep, do what @HugoGiraudel suggested. The browser support is actually great.

    # December 6, 2012 at 5:54 am

    Yeah as the others have said, box-sizing is well supported: http://caniuse.com/#search=Box-sizing

    # December 6, 2012 at 5:54 am

    ok, I’ll give it a try, thanks

    # December 6, 2012 at 6:15 am

    It’s definitely worth it and it makes boat loads of sense in the brain, especially for responsive sites where you want something to be a percentage width.

    That way you can do like width: 60%; padding: 20px; and it will just do what you want.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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