CSS logical properties: space content by reading direction

How the rule works

A bilingual case record has a small status badge next to its heading. Margin-inline-start keeps the gap on the correct side as the direction changes, while padding-block controls vertical space independently. The markup must still declare the content language and direction accurately; CSS cannot infer a person's script. If a layout truly depends on a physical device edge, a physical property may be correct, but choose that deliberately. Review icons and arrows too, since changing spacing alone does not make a directional symbol correct.

.case-heading { padding-block: .75rem; padding-inline: 1rem; }
.case-heading__badge { margin-inline-start: .5rem; }
.case-record { max-inline-size: 70rem; margin-inline: auto; }

Cost and verification

Logical properties add no dependency and little runtime cost. Their value is lower duplication across left-to-right and right-to-left variants. Test actual localized copy and bidirectional identifiers, not merely a mirrored screenshot. Some third-party components may still use physical margins; inspect those overrides before adding a second direction-specific rule. Keep focus and reading order aligned with the DOM in both directions.

Common Mistakes

• Do not assume inline-start always means left.
• Do not substitute CSS direction for correct HTML language metadata.
• Do not mirror numbers or brand marks without reviewing their meaning.

Connected lessons

• Responsive CSS
• HTML lang, dir, and bdi: keep text pronunciation and direction stable
• CSS media queries: change layout at a content failure point
• CSS units and functions: size against the right reference

Related behavior

• CSS writing-mode: test layout axes rather than rotating text