CSS Logical Properties
CSS logical properties replace physical directions (left/right/top/bottom) with logical ones (inline-start/inline-end/block-start/block-end). They make CSS work correctly in all writing directions - essential for internationalization (RTL languages like Arabic, Hebrew).
Logical vs Physical Properties
- margin-inline-start - Replaces margin-left (in LTR). Automatically becomes margin-right in RTL languages
- margin-inline-end - Replaces margin-right (in LTR). Becomes margin-left in RTL
- margin-block-start - Replaces margin-top. Works for both LTR and RTL
- margin-block-end - Replaces margin-bottom
- padding-inline / padding-block - Shorthand for inline (horizontal) / block (vertical) padding
- inline-size - Replaces width. block-size - Replaces height
- inset-inline-start - Replaces left for positioned elements. Flips in RTL automatically
Logical Properties Code
/* Physical (old) → Logical (modern) */
/* margin-left → margin-inline-start */
/* margin-right → margin-inline-end */
/* margin-top → margin-block-start */
/* margin-bottom → margin-block-end */
/* Practical example */
.card {
padding-inline: 24px; /* Left + right padding */
padding-block: 16px; /* Top + bottom padding */
margin-block-end: 16px; /* Bottom margin */
border-inline-start: 4px solid #E44D26; /* Left border (flips in RTL) */
inline-size: 100%; /* Width */
max-inline-size: 600px; /* Max-width */
}
/* This card works perfectly in both LTR and RTL! */
/* Shorthand */
.box {
margin-inline: auto; /* Center horizontally */
padding-block: 2rem; /* Vertical padding */
}Tip
Start using margin-inline: auto instead of margin-left: auto; margin-right: auto. It does the same thing in LTR but automatically flips for RTL. If your site ever gets translated to Arabic or Hebrew, your layout works without changes.
Mobile-first: start with mobile styles, enhance with min-width media queries
Common Mistake
Using padding-left for inline spacing in components that might appear in RTL contexts. padding-inline-start is the safe replacement that auto-adapts. It's a drop-in replacement that future-proofs your CSS.
Practice Task
Refactor a card to logical properties: (1) Replace margin-left/right with margin-inline, (2) Replace padding-top/bottom with padding-block, (3) Replace border-left with border-inline-start, (4) Replace width with inline-size.
Quick Quiz
Key Takeaways
- CSS logical properties replace physical directions (left/right/top/bottom) with logical ones (inline-start/inline-end/block-start/block-end).
- margin-inline-start - Replaces margin-left (in LTR). Automatically becomes margin-right in RTL languages
- margin-inline-end - Replaces margin-right (in LTR). Becomes margin-left in RTL
- margin-block-start - Replaces margin-top. Works for both LTR and RTL