CSS in Depth

Box model and border-box sizing

The box model refers to the composition of elements on a page. When you specify the height or width of an element, you’re setting the content size—any padding, border, and margin will be added to that.

Applying box-sizing: border-box to an element changes the box model to a more predictable behavior. Setting height or width will control the size of the entire element, including its padding and border.

See chapter 3 for information on applying border-box sizing to the entire page, as well as other important concepts ...