Topic 30 of 30
Logical & Writing Modes
Overview
CSS Logical Properties use start/end/inline/block instead of physical directions (top/right/bottom/left). They automatically adapt to RTL languages and vertical writing modes, making internationalization automatic.
Syntax
css
/* Physical → Logical equivalents */
margin-top → margin-block-start
margin-bottom → margin-block-end
margin-left → margin-inline-start
margin-right → margin-inline-end
/* Shorthand */
margin-block: 16px; /* top + bottom */
margin-inline: auto; /* left + right → center! */
padding-block: 24px 16px;
padding-inline: 20px;
/* Sizing */
width → inline-size
height → block-size
max-width → max-inline-size
/* Border */
border-top → border-block-start
border-left → border-inline-start
/* Better centering */
.container { margin-inline: auto; }Common Pitfalls
- margin: 0 auto still works but margin-inline: auto is the modern, direction-aware equivalent.
- Browser support is excellent (95%+) but some older Safari versions have gaps — check caniuse.com.
- Interview tip: The ultimate centering technique: margin-inline: auto for horizontal, margin-block: auto with explicit height for vertical.
Real-World Example
Internationalized navigation that works in both LTR and RTL:
example
css
/* Works for Arabic/Hebrew (RTL) without extra CSS */
.navbar {
display: flex;
padding-inline: 24px; /* left/right padding */
gap: 16px;
}
.dropdown {
inset-inline-start: 0; /* "left" in LTR, "right" in RTL */
border-inline-start: 3px solid #FFD700;
}
/* Article layout */
.article {
max-inline-size: 65ch; /* max-width: 65ch */
margin-inline: auto; /* centered */
padding-block: 2rem; /* top + bottom padding */
padding-inline: clamp(1rem, 5%, 2rem);
}
/* Component borders that flip with writing direction */
.sidebar-item {
border-inline-start: 3px solid transparent;
}
.sidebar-item.active {
border-inline-start-color: #FFD700; /* left in LTR, right in RTL */
padding-inline-start: 12px;
}