What are CSS logical properties

· Category: HTML & CSS

Short answer

Logical properties map to physical directions based on the document's writing mode. margin-inline-start corresponds to margin-left in LTR and margin-right in RTL.

How it works

Instead of left, right, top, and bottom, you use inline-start, inline-end, block-start, and block-end. This makes layouts automatically adapt to RTL languages and vertical writing modes.

Example

.card {
  margin-inline-start: 1rem;
  padding-block: 2rem;
  border-inline-end: 2px solid #333;
}

Why it matters

Logical properties reduce the need for separate RTL stylesheets. They future-proof your design for internationalization and improve maintainability in multilingual applications.

Tips

  • Pair with dir="rtl" or the :dir() pseudo-class.
  • Use text-align: start instead of left or right.
  • Browser support is excellent in modern browsers.