Physical versus logical
Traditional properties like margin left and top are physical: they always point at the same screen edge. Logical properties instead reference the flow of text, using the inline axis along which characters run and the block axis along which lines stack.
- inline start and end follow the reading direction.
- block start and end follow the line stacking direction.
- In a left to right language inline start maps to the left edge.
Why direction aware spacing matters
For a right to left language the inline axis flips, so logical spacing moves to the correct side without separate stylesheets. This lets one rule serve many locales.
- Margin inline start adds space before text begins regardless of direction.
- Padding block start sits at the top in horizontal writing modes.
- Shorthand pairs like inset inline set both edges of one axis.
Logical properties also adapt to vertical writing modes, where the block axis becomes horizontal, keeping layouts correct across scripts.
Key idea
Logical properties map spacing and sizing onto the inline and block flow axes, so a single rule mirrors correctly for right to left and vertical writing modes.