CSS Logical Properties

Also Known As

TL;DR

Explanation

CSS logical properties replace directional properties with flow-relative equivalents: inline (horizontal in LTR, vertical in TTB) and block (vertical in LTR, horizontal in TTB). margin-inline-start replaces margin-left (automatically becomes margin-right in RTL). padding-block replaces padding-top + padding-bottom. border-inline-end replaces border-right. inset-inline-start replaces left. Use logical properties from the start of a project — retrofitting physical properties for RTL languages requires overriding every physical property in RTL stylesheets.

Common Misconception

Why It Matters

Common Mistakes

• Mixing physical and logical properties — margin-left alongside margin-inline-start causes conflicts.
• Using logical properties for decorative directional elements — a left-pointing arrow should still be physical.
• Not setting dir=rtl on the html element for RTL languages — logical properties require a direction context.
• Browser support gaps — inset-* properties have slightly less support than margin-*/padding-*.

Code Examples

/* Physical properties — requires RTL override:
.nav-item { margin-left: 16px; border-right: 1px solid; padding-left: 8px; }
/* RTL override needed: */
[dir=rtl] .nav-item { margin-left: 0; margin-right: 16px;
    border-right: none; border-left: 1px solid; padding-left: 0; padding-right: 8px; }

/* Logical properties — RTL works automatically:
.nav-item {
    margin-inline-start: 16px;  /* margin-left in LTR, margin-right in RTL */
    border-inline-end: 1px solid; /* border-right in LTR, border-left in RTL */
    padding-inline-start: 8px;
}
/* No RTL override needed — browser handles it based on dir attribute */

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values

Tags

Related Terms