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 including:
- Centering content
- Creating columns of equal height
- Controlling spacing between elements
Get CSS in Depth