box-sizing
demoThis is a box with 20px border (red), 20px padding (yellow), and 300px width, using the standard box-sizing model (box-sizing: content-box
):
box-sizing: content-box
(the default)This means the white part of the box is 300px wide, but the entire box takes up 380px of space.
This box has the same border, padding and width, but uses box-sizing: border-box
:
box-sizing: border-box
This means the entire box – borders + padding + content – is 300px wide.