The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # December 6, 2012 at 4:22 am

    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)

    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 (

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

    # December 6, 2012 at 5:34 am

    This reply has been reported for inappropriate content.

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

    # December 6, 2012 at 5:54 am

    This reply has been reported for inappropriate content.

    Yeah as the others have said, box-sizing is well supported:

    # December 6, 2012 at 5:54 am

    ok, I’ll give it a try, thanks

    # December 6, 2012 at 6:15 am

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed