Comparison
Box modelvsbox-sizing
Box model
you set the width to 300 pixels and the element takes up 340, because of padding you forgot to count.
The four concentric areas of every element — content, padding, border, margin — and the rules for how a declared width maps onto them. Under the default `content-box`, `width` sizes only the content area and padding and border are added on top, which is the single most common source of 'why is this element wider than I said'. Margins are outside the box entirely and do not participate in its size or its background.
Full entry →box-sizing
you put `box-sizing: border-box` in the reset and every width in the codebase started meaning what you expected.
The property that chooses whether a declared width includes padding and border. `border-box` makes width mean the outer size, which is what almost everyone means almost every time, and it is why nearly every CSS reset sets it globally. The one place `content-box` still matters is when a component must size to its content exactly and the padding is meant to grow it.
Full entry →