Box model

display

Sets the box's outer display type (how it takes part in its parent's layout) and its inner display type (how its own children are laid out), or removes the box altogether.

The two-value syntax names the outer and inner types separately: display: inline flex is the same as inline-flex, and display: block flow-root the same as flow-root.

visibility

Hides a box while keeping its space in the layout. Unlike display: none, a hidden box still takes up room, and a descendant can set visibility: visible to show itself inside a hidden parent.

collapse removes a table row, column or group from the table as well as hiding it; on other elements it behaves like hidden.

box-sizing

Chooses which box width and height measure: the content box alone, or the content plus its padding and border.

*, *::before, *::after { box-sizing: border-box; }

width, height

The preferred size of the box in each physical axis. A <box-size> is a non-negative length or percentage, min-content, max-content, fit-content(<length-percentage>) or calc-size(); auto lets layout decide.

A percentage height only resolves when the containing block has a definite height; otherwise it behaves as auto.

min-width, min-height

A lower limit on the box's size. A minimum always wins: it overrides both width/height and the matching max-*.

auto computes to 0 for most boxes, but for flex and grid items it is the automatic minimum size, which stops an item shrinking below its content. Set min-width: 0 to let a flex item shrink past long text.

max-width, max-height

An upper limit on the box's size. It overrides width/height but loses to min-*.

max-width: min(100%, 60rem);

aspect-ratio

A preferred width-to-height ratio, used to work out the box's size in one axis when only the other is known.

aspect-ratio: 16 / 9 gives a widescreen box; aspect-ratio: 1 a square. auto 4 / 3 uses a replaced element's natural ratio when it has one and falls back to 4:3.

frame-sizing

Lets an <iframe> size itself to the document it contains, so the embed grows to fit its content instead of scrolling.

zoom

Scales an element and everything inside it, including its layout size, so surrounding content reflows around the zoomed box. Unlike transform: scale(), the box really takes up the larger or smaller space.

margin

Shorthand for the four physical margins: the transparent space outside the border. One value sets all four sides; two set top/bottom then left/right; three set top, left/right, bottom; four go clockwise from the top.

margin-inline: auto centres a sized block in its container; in a flex or grid item an auto margin absorbs the free space on that side. Adjacent vertical margins of blocks in normal flow collapse into the larger of the two.

margin-top, margin-right, margin-bottom, margin-left

The margin on one physical side. Negative values are allowed and pull neighbouring content closer.

margin-trim

Discards the margins of a container's first and last children where they meet the container's edge, so the container's own padding sets the spacing.

padding

Shorthand for the four physical paddings: the space between the border and the content. Takes one to four values in the same order as margin.

Padding can never be negative and never collapses. It takes the element's background.

padding-top, padding-right, padding-bottom, padding-left

The padding on one physical side.

overflow

Shorthand for overflow-x and overflow-y: what happens when content is bigger than its box. One value sets both axes; two set x then y.

Any value other than visible or clip makes the box a scroll container, which starts a new block formatting context and becomes the reference for position: sticky.

overflow-x, overflow-y

Overflow handling in one physical axis. If one axis is visible or clip and the other is not, the visible one is treated as auto and clip as hidden.

overflow-clip-margin

How far content may paint outside the box before it is clipped, when overflow is clip. The optional box keyword sets where the margin is measured from.