Intuitive Box Sizing
CSS is great, but it has some unusual quirks. One of its most annoying oddities has to do with how the width and height of elements are calculated. Take this CSS, for example:
div.example {
width: 100px;
height: 100px;
padding: 10px;
border: solid 2px;
}
You might expect the div.example
element to be 100 pixels wide and 100 pixels high, as those are the values specified for the width
and height
properties, but you would be wrong. The CSS above will actually result in a div.example
that has a width and height of 124 pixels.
Where did the number 124 come from? By default in CSS and element’s dimension are calculated using something called the content box model. That means the area where the content goes, in the middle of an element, are what the width
and height
properties apply to. So, in this case, our context box is made to be 100 pixels square. Then the padding and border are added on top of that. This results in a width of 124 pixels: 100 pixels of content width, 10 pixels of padding on either side, and 2 pixels of border on either side. 100 + 10 + 10 + 2 + 2 = 124. The height is calculated the same way.
Quirky, isn’t it? That’s not how most people think about this kind of thing. When you write something like width: 100px
you expect the thing to be 100 pixels wide, right?
Well, I’ve got good news! You can specify a different box sizing model in CSS that actually does what you would expect. All you need to do is set the box-sizing
property to border-box
, like this:
div.example {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: solid 2px;
}
Now, instead of the width
and height
properties applying to the content box in the middle of the element, they instead apply to the outermost border box surrounding the outer edge of the element. This results in a 100 pixel square box, which is much more intuitive.
I don’t know about you, but I vastly prefer the border-box
model, which is why I almost always start every new project with the following CSS at the top of the stylesheet, which applies border-box
sizing to all elements so I don’t have to think about it again:
* {
box-sizing: border-box;
}