Snippet O’ the Week: * { box-sizing: border-box } FTW

The problem: Width and padding relationships.

The solution: This classic CSS snippet.

You should add this to your snippet libraries today (assuming you don’t already have it there). It’s brought to us by the amazingly brilliant Paul Irish, written as titled “* { box-sizing: border-box } FTW” from February of 2012. Paul goes into depth about the snippet; the solution, browser support, safety of use and performance…

Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years.

Now, here’s the snippet:

1
2
3

/* apply a natural box layout model to all elements */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Thanks to @rblakejohnson for sharing this great snippet!

** UPDATED **

Here is a simple example that demonstrates this cool little snippet in action:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
    /* ***
    comment this out to see what it does without it */
    * {
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
    }
    /* *** */
    body{
        padding: 0px;
        margin: 0px;
        font-family: "Helvetica", Arial, sans-serif;
        background: #eee;
    }
    #wrapper{
        width: 960px;
        margin: 0 auto;
        padding: 200px;
        background: #ccc;
    }
    h1, p{
        color: #444;
        text-shadow: 0 1px 0 #fff;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <h1>This is a padding test</h1>
        <p>Habitasse parturient nec risus ac cras, elementum nec eu habitasse augue ac sociis, parturient tincidunt cras turpis ridiculus? Proin, est et enim integer aliquet proin dignissim arcu, sit adipiscing lacus! Hac nisi, nascetur in cum, augue ut magnis vel! Pulvinar turpis et, platea vut et, vel? Dictumst! Nisi, platea! Pulvinar sit, tortor ac nunc, pid egestas, risus dolor tristique et, mattis diam. Nisi tempor dis hac, tortor ridiculus, velit mattis habitasse magna, pellentesque dictumst velit tristique natoque, habitasse ultricies magnis eros. A pid turpis dapibus? Integer cum proin lacus nunc! Turpis, parturient, scelerisque pid in, dictumst! Etiam pid lectus. Enim cursus augue odio porttitor, proin cras aliquet ridiculus? Integer parturient nec risus. Etiam vel penatibus sociis cum scelerisque turpis scelerisque.
        </p>
    </div>
</body>
</html>

About the author

Patrick Cox wrote 98 articles on this blog.

Patrick is a UX Designer and the co-creator of Payba.cc and Aplethora (a two man interwebs design firm). He also enjoys family, snowboarding, sports and sugar free water mix ins and.... this is his blog.

4 comments

  1. Nikia

    Hi, just discovered your blog – thanks for this! So basically if I were to set a width to a div of 200px then set 20px of padding – the overall width would still be 200px by using this?

    • Patrick Cox

      Nikia, yep. When you set the box-sizing to border-box on all elements (using *) then all of your elements will hold your defined widths and the padding you set won’t be added to the over all width of the box. This way the width of the box will stay what you defined it, you can set the padding you want for the inside of the box, and the inner elements of the box will only be effected by the padding — the way it should be.

      I updated the post above with a simple example code, you can copy out the code, run it in your browser and comment/comment outthe *{} property to see how it reacts.