Detailed explanation
CSS logical properties describe layout relative to the content’s writing mode rather than fixed physical edges. Physical properties such as margin-left, padding-top, and right always target the left, top, and right edges of a box. Logical properties such as margin-inline-start, padding-block-start, and inset-inline-end target flow-relative edges. This distinction matters when supporting right-to-left languages or vertical text: spacing and positioning can follow the reading flow without maintaining separate directional overrides. Physical properties are not inherently incorrect in RTL; they simply do not adapt automatically.
The mapping depends primarily on writing-mode and direction. The inline axis follows the direction in which text runs within a line, while the block axis follows the progression of successive lines. With writing-mode: horizontal-tb and direction: ltr, inline-start maps to left, inline-end to right, block-start to top, and block-end to bottom. With RTL direction, the inline edges swap, but the block edges remain unchanged. With writing-mode: vertical-rl, the inline axis is vertical and blocks progress from right to left; direction determines which end of the vertical inline axis is the start.
For the example .card { margin-inline: auto; padding-block: 1rem; }, margin-inline sets both inline margins, while padding-block sets both block paddings. In horizontal writing, these correspond to left/right margins and top/bottom padding. In vertical writing, the corresponding physical axes change. Auto inline margins can centre a constrained-width block in ordinary horizontal block layout, but centring still depends on available space and the layout model. Also, because both inline margins have the same value here, asymmetric spacing such as margin-inline-start: 1rem demonstrates RTL adaptation more clearly.
Under the hood, the browser resolves logical edges using the element’s computed writing mode and direction. Logical and physical declarations that target the same resolved edge participate in the cascade, so mixing them can create unexpected overrides. Interviewers look for an understanding of both axes, not just the claim that logical properties support RTL. Prefer logical properties when layout should follow content flow, and retain physical properties when the design intentionally refers to a fixed physical edge. For HTML text direction, use the dir attribute appropriately rather than treating direction as merely a visual styling switch.
Key points to remember
- Physical properties target fixed edges; logical properties target flow-relative edges.
- writing-mode defines the axes and block progression; direction determines inline start and end.
- In horizontal RTL, inline-start maps to right, while block-start remains top.
- margin-inline and padding-block set both ends of their respective axes.
- Logical properties reduce directional overrides but do not change normal layout or auto-margin rules.
Common mistakes candidates make
- Assuming inline always means horizontal and block always means vertical.
- Claiming all physical properties break RTL layouts instead of distinguishing fixed-edge and flow-relative intent.
- Mixing logical and physical declarations for the same edge without checking cascade precedence.
Likely follow-up questions
How do writing-mode and direction differ?
writing-mode determines whether lines run horizontally or vertically and how blocks progress. direction establishes LTR or RTL inline direction and participates in bidirectional text handling; for HTML content, express the base direction with dir.
What happens if margin-left and margin-inline-start are both declared?
In horizontal LTR, they target the same edge, so cascade precedence decides which wins; with otherwise equal precedence, the later declaration wins. In horizontal RTL, margin-inline-start targets the right edge, so the two declarations can apply to different edges.
Does inset-inline replace left and right in every layout?
It maps to left and right in horizontal writing, but to top and bottom in vertical writing. Like physical inset properties, it controls positioned elements and has no positioning effect on a statically positioned box.
Interview tip: Explain the two axes first, map margin-inline-start in LTR and RTL, then mention vertical writing to demonstrate deeper understanding.