margin-block

The preview on this page paints the margin orange. The preview is horizontal, so the start is the top and the end is the bottom.

Writing the value

• One value applies to both sides. Two values apply to the start (margin-block-start) and the end (margin-block-end), in that order.
• It takes the same values as margin: lengths, %, auto, and negative values. Even in the block direction, a % is a share of the parent's size in the inline direction (its width in horizontal writing).
• The initial value is 0.

How the direction changes it

• In writing-mode: vertical-rl, lines advance from right to left, so the start is the right and the end is the left. In vertical-lr, the start is the left.
• Which sides they are depends on the element's own writing-mode, not on its parent's. direction does not change them.

When to use it

Spacing paragraphs and headings with margin-block: 1em leaves the gap in the direction lines advance, on vertical pages too.

Watch out

• Between block elements stacked one after another, the margin-block-end of the first and the margin-block-start of the next do not add up; only the larger one remains (margin collapsing). It does not happen to flex or grid items.
• auto becomes 0 on an ordinary block element. Flex and grid items get the leftover space instead, so auto centers them vertically.
• In horizontal writing, it refers to the same sides as margin-top and margin-bottom. When an element has both, the one written later wins.
• Works in all major browsers.