CSS logical properties are writing mode-aware alternatives to physical properties like left, right, top, and bottom. Instead of being tied to the physical screen, they adapt to the text direction and writing mode of your content. This makes your CSS automatically work with right-to-left (RTL) languages like Arabic and Hebrew, vertical writing modes like Japanese, and any future writing directions—all without changing a single line of CSS.
Physical vs Logical Properties
Understanding the difference between physical and logical properties is key to creating truly international designs.
Physical Properties (Old Way)
- Based on screen directions: top, right, bottom, left
- Fixed to physical layout
- Don't adapt to writing mode
- Require separate styles for RTL
- Examples: margin-left, padding-top, border-right
Logical Properties (Modern Way)
- Based on content flow: inline, block, start, end
- Adapt to writing mode automatically
- Work with any text direction
- Single codebase for all languages
- Examples: margin-inline-start, padding-block-end
Key Concepts
- Inline axis: Direction text flows (horizontal in English, vertical in some Asian languages)
- Block axis: Direction blocks stack (vertical in English, horizontal in some Asian languages)
- Start: Beginning of text/block direction
- End: End of text/block direction
In English (LTR, horizontal):
Inline = horizontal (left to right)
Block = vertical (top to bottom)
Start = left (inline) or top (block)
End = right (inline) or bottom (block)
Inline and Block Dimensions
Logical properties use inline for the text direction and block for the stacking direction.
/* Width and Height - Logical equivalents */
/* Physical (old) */
.element {
width: 300px;
height: 200px;
}
/* Logical (modern) */
.element {
inline-size: 300px; /* Width in LTR horizontal text */
block-size: 200px; /* Height in LTR horizontal text */
}
/* Min and Max sizes */
/* Physical */
.element {
max-width: 800px;
min-height: 200px;
}
/* Logical */
.element {
max-inline-size: 800px;
min-block-size: 200px;
}
/* Why use logical? */
/* If writing-mode changes to vertical,
inline-size becomes height and block-size becomes width */
/* Vertical writing mode */
.vertical-text {
writing-mode: vertical-rl;
inline-size: 300px; /* Now controls height! */
block-size: 200px; /* Now controls width! */
}Logical Dimension Properties
| Property | Values | Description |
|---|---|---|
inline-size | length or % | Logical width (horizontal in LTR) |
block-size | length or % | Logical height (vertical in LTR) |
min-inline-size | length or % | Logical min-width |
max-inline-size | length or % | Logical max-width |
min-block-size | length or % | Logical min-height |
max-block-size | length or % | Logical max-height |
inline-size and block-size
Logical Margin and Padding
Logical margin and padding use inline, block, start, and end instead of left, right, top, bottom.
/* Margin - Physical vs Logical */
/* Physical (old) */
.element {
margin-top: 1rem;
margin-right: 2rem;
margin-bottom: 1rem;
margin-left: 2rem;
}
/* Logical (modern) */
.element {
margin-block-start: 1rem; /* top in LTR */
margin-inline-end: 2rem; /* right in LTR */
margin-block-end: 1rem; /* bottom in LTR */
margin-inline-start: 2rem; /* left in LTR */
}
/* Shorthand properties */
/* Physical */
.element {
margin: 1rem 2rem; /* top/bottom left/right */
padding: 1rem 2rem 3rem; /* top left/right bottom */
}
/* Logical */
.element {
margin-block: 1rem; /* block-start and block-end */
margin-inline: 2rem; /* inline-start and inline-end */
padding-block: 1rem 3rem; /* block-start block-end */
padding-inline: 2rem; /* inline-start and inline-end */
}
/* Individual sides */
.element {
margin-inline-start: 2rem; /* Left in LTR, Right in RTL */
padding-block-end: 1rem; /* Bottom in horizontal text */
}
/* Why this matters for RTL */
/* Physical - breaks in RTL */
.button {
margin-left: 1rem; /* Always left, wrong in RTL! */
}
/* Logical - works in RTL */
.button {
margin-inline-start: 1rem; /* Left in LTR, Right in RTL ✓ */
}Logical Margin Properties (Same for Padding)
| Property | Values | Description |
|---|---|---|
margin-inline-start | length | Start of inline axis (left in LTR) |
margin-inline-end | length | End of inline axis (right in LTR) |
margin-block-start | length | Start of block axis (top in horizontal) |
margin-block-end | length | End of block axis (bottom in horizontal) |
margin-inline | start end | Shorthand for inline-start and inline-end |
margin-block | start end | Shorthand for block-start and block-end |
Logical Margins Adapt to Direction
🌍 RTL Language Support:
Using logical properties means your CSS automatically adapts to RTL languages like Arabic, Hebrew, Persian, and Urdu. No need for separate RTL stylesheets or dir="rtl" overrides. Just set direction: rtl and everything flips!
Logical Border Properties
Border properties also have logical equivalents that adapt to writing direction.
/* Border - Physical vs Logical */
/* Physical (old) */
.element {
border-left: 2px solid blue;
border-right: 2px solid red;
border-top: 2px solid green;
border-bottom: 2px solid yellow;
}
/* Logical (modern) */
.element {
border-inline-start: 2px solid blue; /* left in LTR */
border-inline-end: 2px solid red; /* right in LTR */
border-block-start: 2px solid green; /* top */
border-block-end: 2px solid yellow; /* bottom */
}
/* Border width, style, color */
.element {
border-inline-start-width: 2px;
border-inline-start-style: solid;
border-inline-start-color: blue;
}
/* Border radius - logical */
/* Physical */
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Logical */
.element {
border-start-start-radius: 8px; /* top-left in LTR */
border-start-end-radius: 8px; /* top-right in LTR */
border-end-start-radius: 8px; /* bottom-left in LTR */
border-end-end-radius: 8px; /* bottom-right in LTR */
}
/* Practical example: Card with accent border */
.card {
border-inline-start: 4px solid var(--accent-color);
/* Left border in LTR, right border in RTL */
padding-inline: 1.5rem;
padding-block: 1rem;
border-radius: 8px;
}Logical Border Properties
Logical Position Properties
The inset property is a logical shorthand for positioning elements.
/* Position - Physical vs Logical */
/* Physical (old) */
.element {
position: absolute;
top: 1rem;
right: 2rem;
bottom: 1rem;
left: 2rem;
}
/* Logical (modern) */
.element {
position: absolute;
inset-block-start: 1rem; /* top */
inset-inline-end: 2rem; /* right in LTR */
inset-block-end: 1rem; /* bottom */
inset-inline-start: 2rem; /* left in LTR */
}
/* Inset shorthand */
.element {
position: absolute;
inset: 1rem; /* All sides */
inset: 1rem 2rem; /* block inline */
inset: 1rem 2rem 3rem 4rem; /* block-start inline-end block-end inline-start */
}
/* Individual inset properties */
.element {
inset-inline: 2rem; /* inline-start and inline-end */
inset-block: 1rem; /* block-start and block-end */
}
/* Practical example: Overlay */
.overlay {
position: fixed;
inset: 0; /* Cover entire viewport */
background: rgba(0, 0, 0, 0.5);
}
/* Centered with inset */
.centered {
position: absolute;
inset: 0;
margin: auto;
inline-size: 300px;
block-size: 200px;
}Logical Inset Properties
Logical Text Alignment
Text alignment also has logical values that adapt to writing direction.
/* Text align - Physical vs Logical */
/* Physical (old) */
.element {
text-align: left; /* Always left, wrong in RTL */
text-align: right; /* Always right */
}
/* Logical (modern) */
.element {
text-align: start; /* Left in LTR, Right in RTL */
text-align: end; /* Right in LTR, Left in RTL */
}
/* Float - logical */
/* Physical */
.element {
float: left;
float: right;
}
/* Logical */
.element {
float: inline-start; /* Left in LTR, Right in RTL */
float: inline-end; /* Right in LTR, Left in RTL */
}
/* Clear - logical */
.element {
clear: inline-start;
clear: inline-end;
clear: both;
}Logical Text Alignment
Complete Practical Example
A complete component using logical properties that automatically adapts to any writing direction.
Complete Logical Properties Example (Switch LTR/RTL)
Physical to Logical Conversion
Quick reference for converting physical properties to their logical equivalents.
Physical → Logical Property Mapping
| Property | Values | Description |
|---|---|---|
width | inline-size | Horizontal in LTR |
height | block-size | Vertical in LTR |
margin-left | margin-inline-start | Start of inline axis |
margin-right | margin-inline-end | End of inline axis |
margin-top | margin-block-start | Start of block axis |
margin-bottom | margin-block-end | End of block axis |
padding-left | padding-inline-start | Start of inline axis |
border-left | border-inline-start | Start of inline axis |
left | inset-inline-start | Position start inline |
top | inset-block-start | Position start block |
text-align: left | text-align: start | Align to start |
Key Takeaways
- Logical properties: Adapt to writing direction automatically
- inline-size: Width in horizontal text
- block-size: Height in horizontal text
- inline axis: Text flow direction
- block axis: Block stacking direction
- start/end: Replace left/right for direction-awareness
- inset: Logical shorthand for positioning
- Use logical properties for international sites
- Single codebase works for LTR and RTL
- Better for vertical writing modes (Asian languages)
- Future-proof for new writing directions
- Supported in all modern browsers
What's Next?
Now that you understand logical properties for internationalization, you're ready to learn about CSS Nesting. In the next lesson, we'll explore native CSS nesting—writing nested selectors without preprocessors, making your CSS more organized and maintainable.
Logical properties are essential for modern, international websites. Start using margin-inline-start instead of margin-left, inline-size instead of width, and your CSS will automatically work with any language and writing direction. It's the same amount of code—just future-proof!