Box model
The properties that set an element's size, its inner and outer spacing, and how it clips content that overflows. Borders live under Color, backgrounds & borders.
display
Sets the outer role (how the box takes part in its parent's layout) and the inner layout mode (how its own children are laid out).
| Value | Effect |
|---|---|
block | Generates a block box on its own line. |
inline | Flows inline with text; width/height and vertical margin do not apply. |
inline-block | Flows inline but accepts width, height and all margins. |
flex / inline-flex | Establishes a flex container. |
grid / inline-grid | Establishes a grid container. |
flow-root | A block that establishes a new block-formatting context (clears floats). |
contents | The box disappears; its children take its place in the layout. |
none | Removes the element and its descendants from the layout entirely. |
Two-value syntax states outer and inner explicitly, e.g. display: inline flex .
box-sizing
Chooses what width and height refer to.
| Value | Meaning |
|---|---|
content-box | The default. Width/height set the content box; padding and border add on top. |
border-box | Width/height include padding and border, so the box never outgrows its declared size. |
*, *::before, *::after { box-sizing: border-box; }width, height
The size of the content box (or the border box under border-box ). Take a <length> or <percentage> of the containing block, or a keyword: auto (size to content/available space), min-content , max-content and fit-content() .
min-width, max-width, min-height, max-height
Clamp the used size. A max-* wins over width / height , and a min-* wins over both — so a min-* will always be respected. max-width: none and max-height: none remove an upper limit.
aspect-ratio
Holds a preferred width-to-height ratio when only one axis is sized, e.g. aspect-ratio: 16 / 9 . Use aspect-ratio: 1 for a square. Combine with auto to fall back to a replaced element's natural ratio.
margin & longhands
Transparent space outside the border. The shorthand takes one to four values (top, right, bottom, left); the longhands are margin-top , margin-right , margin-bottom and margin-left (plus the logical margin-block / margin-inline ).
margin: auto on a sized block centres it in the inline axis; in a flex or grid item an auto margin absorbs free space on that side. Adjacent vertical margins collapse to the larger of the two.
padding & longhands
Space inside the border, between the border and the content. One to four values, or the longhands padding-top … padding-left . Percentages resolve against the containing block's width on every side. Padding is never negative and never collapses.
overflow, overflow-x, overflow-y
What happens when content is larger than its box.
| Value | Meaning |
|---|---|
visible | The default. Content spills outside the box. |
hidden | Overflow is clipped; no scrollbars, but scrollable programmatically. |
clip | Overflow is clipped with no scrolling at all. |
scroll | Always shows scrollbars. |
auto | Scrollbars appear only when needed. |
Setting any non- visible value establishes a scroll container and a new block-formatting context.
visibility
hidden hides the box but keeps its space in the layout; collapse additionally removes rows/columns from a table; visible is the default.