box-sizing

By default, width sets the content only and padding and border are added on. box-sizing: border-box makes width mean the whole box, padding and border included.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

It is the reason columns overflow by exactly the padding you added. Almost every real stylesheet switches everything to border-box on line one.

How to think about it

Set border-box on everything at the top of the stylesheet, then think of width as the box you see. If a layout uses the default, add up the extras before trusting a width.

Worked example

<div class="a">A</div><div class="b">B</div>

Two boxes.

.a, .b { width: 200px; padding: 20px; border: 5px solid rgb(0, 0, 0); }

The same numbers on both.

.b { box-sizing: border-box; }

A is 250px wide on the page: padding and border added on. B is 200px, padding and border included.

Your turn

Make width include padding and border for every element.

* { box-sizing: ; }

The trap

Setting width: 100% and padding on the same element under the default sizing. It becomes wider than its parent and a horizontal scrollbar appears.

Practise box-sizing on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.