Logical Properties
Overview
Historically, CSS used physical directions (margin-left, padding-top). This created a massive nightmare for companies translating their websites into Arabic or Hebrew (languages read Right-to-Left). If you used margin-left to push text away from an icon, in Arabic, the icon flips to the right side, meaning your margin-left is now pushing in the wrong direction! Logical properties (margin-inline-start, padding-block-end) dynamically adapt to the user's reading direction automatically, completely solving internationalization layouts.
Syntax
/* OLD PHYSICAL WAY (Breaks in Right-to-Left languages) */
.card-old {
padding-top: 20px;
padding-bottom: 20px;
margin-left: 15px;
border-right: 2px solid red;
}
/* NEW LOGICAL WAY (Adapts automatically!) */
.card-new {
/* Block = Vertical axis (Top/Bottom) */
padding-block: 20px;
/* Inline-start = "The side where text begins"
(Left in English, Right in Arabic!) */
margin-inline-start: 15px;
/* Inline-end = "The side where text ends" */
border-inline-end: 2px solid red;
}Common Pitfalls
- Mixing physical and logical properties in the same codebase. It creates massive confusion. Modern teams (and modern frameworks like Tailwind V4) are moving entirely to logical properties. Pick one standard and stick to it.
- Assuming
inlinealways means horizontal. If you are rendering vertical Japanese text (top to bottom), theinlineaxis literally rotates 90 degrees to become vertical. Logical properties map to the text flow, not the screen geometry.
Interview Questions
margin-inline: auto; achieve?It is the modern, logical equivalent of margin-left: auto; margin-right: auto;, which perfectly centers a block-level element horizontally within its parent.
Real-World Example
An internationalized button that keeps the icon properly spaced regardless of the language.
.icon-button {
display: flex;
align-items: center;
}
.icon {
/* In English, pushes the text to the right.
In Arabic, pushes the text to the left! */
margin-inline-end: 8px;
}Check Your Knowledge
Test your understanding of Logical Properties with these quick questions.