layout
box-sizing
Controls whether an element's declared width and height include padding and border. border-box is the modern default most stylesheets set globally.
box-sizing: content-box | border-boxCommon values
| Value | Effect |
|---|---|
| content-box | Default; width/height apply only to the content |
| border-box | Width/height include padding and border |
Examples
*, *::before, *::after { box-sizing: border-box; }Common reset making every box predictable
.card { width: 100%; padding: 1rem; box-sizing: border-box; }Card stays 100% wide even with padding
.legacy { box-sizing: content-box; }Opt back into old behavior for a specific component
Gotcha
border-box does not include margin; margin still adds to the outside footprint.
Related properties
width
Sets the horizontal size of an element's content box (or border box if box-sizing: border-box). Modern intrinsic keywords give sizing that adapts to content.
padding
Shorthand for inner spacing between an element's content and its border. Padding never collapses and adds to an element's rendered footprint unless box-sizing: border-box is set.
margin
Shorthand for setting outer spacing on all four sides of an element. Accepts lengths, percentages, or the auto keyword for horizontal centering.
max-width
Caps how wide an element can grow, overriding width when the two conflict. Essential for readable line lengths and responsive containers.
display
Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.