⚡IntermediateModern CSS
CSS Logical Properties
Write writing-mode-aware CSS using logical properties like margin-inline, padding-block, and border-inline-start instead of physical directions.
Overview
CSS Logical Properties replace physical directions (top, right, bottom, left) with **writing-mode-aware** equivalents. In a left-to-right (LTR) language, "inline" is horizontal and "block" is vertical. In a right-to-left (RTL) language or vertical writing mode, these flip automatically.
**Physical → Logical mapping (LTR mode):**
| Physical | Logical |
|---|---|
| `margin-left` | `margin-inline-start` |
| `margin-right` | `margin-inline-end` |
| `margin-top` | `margin-block-start` |
| `margin-bottom` | `margin-block-end` |
| `width` | `inline-size` |
| `height` | `block-size` |
| `top` | `inset-block-start` |
| `left` | `inset-inline-start` |
**Shorthand conveniences:**
- `margin-inline: auto` = `margin-left: auto; margin-right: auto` (center horizontally)
- `padding-block: 24px` = `padding-top: 24px; padding-bottom: 24px`
- `border-inline-start` = `border-left` in LTR, `border-right` in RTL
Key Points
- •margin-inline: auto centers an element horizontally in any writing direction
- •padding-block shorthand sets both block-start and block-end padding at once
- •border-inline-start: creates a "left border" in LTR, "right border" in RTL
- •inset: 0 is shorthand for top: 0; right: 0; bottom: 0; left: 0 (logical: positions all four sides)
- •inline-size = width; block-size = height (in horizontal writing modes)
- •Logical properties automatically adapt in RTL layouts without extra CSS
- •The :dir() pseudo-class can target direction-specific styles as an alternative
Examples
Centering a container with logical properties
/* Old physical way */
.container-old {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
/* Modern logical way shorter and writing-mode-aware */
.container {
inline-size: min(100%, 1200px);
margin-inline: auto;
padding-inline: clamp(16px, 5vw, 48px);
}margin-inline: auto is the modern standard for centering block elements.
Block vertical spacing with padding-block
.section {
padding-block: 80px; /* top and bottom padding */
padding-inline: 24px; /* left and right padding */
}
/* Single sides */
.card {
margin-block-start: 24px; /* margin-top */
margin-block-end: 0; /* margin-bottom */
padding-block: 20px;
padding-inline: 16px;
}Logical border for multilingual layouts
/* Creates a left-side accent in LTR, right-side in RTL */
blockquote {
border-inline-start: 4px solid #6366f1;
padding-inline-start: 20px;
margin-inline-start: 0;
color: #374151;
font-style: italic;
}
/* Logical inset instead of position: absolute */
.badge {
position: absolute;
inset-block-start: 8px; /* top: 8px */
inset-inline-end: 8px; /* right: 8px in LTR, left: 8px in RTL */
}Common Mistakes
- Mixing logical and physical properties on the same element they can conflict; stick to one system
- Using logical properties without understanding they only matter in non-LTR contexts in LTR-only sites they behave identically to physical properties
- Forgetting that inset is a physical shorthand (not logical) for logical use inset-block and inset-inline
Note
Start adopting logical properties for new projects using the "inline" and "block" equivalents of margin and padding. They are more descriptive (padding-inline reads naturally as "inline padding") and future-proof for internationalization.
Exercises
Write CSS to style the HTML scaffold. The preview updates live — when it looks right, mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4