Logical properties

Block and inline, not top and left

Logical properties replace the physical axes (top/right/bottom/left) with flow-relative ones. The inline axis runs along the line of text; the block axis stacks lines. In a default left-to-right, top-to-bottom document, inline maps to horizontal and block to vertical — but switch writing-mode or direction and the mapping rotates with it.

So padding-inline is the padding at the start and end of a line, and padding-block is the padding above and below it. The -start / -end suffixes pick one side: margin-inline-start is the leading edge of the line (left in LTR, right in RTL).

Why it beats the physical version

Hard-coded margin-left: 2rem on a list bullet looks correct in English and broken in Arabic — the indent ends up on the wrong side. margin-inline-start: 2rem indents the leading edge in both, because the browser resolves "start" from the element's direction. One declaration, correct in every locale, no RTL stylesheet.

The shorthands

The two-value shorthands save a lot of typing. margin-inline: auto is the modern, direction-safe way to center a block horizontally. padding-block: 1rem 2rem sets top-then-bottom padding (in LTR) in one line. And inset is the shorthand for all four offsets on a positioned element — its values map in physical top/right/bottom/left order, so inset: 0 pins it to every edge. For the flow-relative pairs, reach for inset-block and inset-inline instead.

Mapping cheat sheet

In a standard LTR document: inline-start is left, inline-end is right, block-start is top, block-end is bottom. Flip direction: rtl and the two inline ends swap; set writing-mode: vertical-rl and the whole grid rotates 90 degrees. You write the rule once against the flow, and the browser maps it to pixels.