CSS Logical Properties

Introduction

CSS Logical Properties replace physical directions (left, right, top, bottom) with flow-relative ones (inline-start, inline-end, block-start, block-end). Your CSS automatically adapts to different writing modes and text directions.

In LTR, margin-inline-start is the left margin. In RTL (Arabic, Hebrew), it becomes the right margin — no code changes needed.

Even if you only support LTR today, logical properties are more semantic and represent where CSS is heading.

Key Concepts

Physical vs Logical

css

/* Physical */
.element { margin-left: 1rem; padding-top: 1rem; width: 300px; }

/* Logical */
.element { margin-inline-start: 1rem; padding-block-start: 1rem; inline-size: 300px; }

Shorthand Properties

css

.element {
  margin-inline: 1rem 2rem;  /* start end */
  margin-block: 0.5rem;
  padding-inline: 1rem;
  border-inline: 1px solid;
}

Logical Positioning

css

.tooltip {
  inset-inline-start: 0;
  inset-block-start: 100%;
}
.overlay { inset: 0; }

Practical Examples

1. RTL-Ready Card

css

.card {
  padding-inline: 1.5rem;
  padding-block: 1rem;
}
.card__icon { margin-inline-end: 0.75rem; }
.card__arrow { margin-inline-start: auto; }

2. Text Alignment

css

.content { text-align: start; }
.actions { text-align: end; }

3. Centered Container

css

.container {
  max-inline-size: 65ch;
  margin-inline: auto;
}

Best Practices

inline = text direction axis, block = perpendicular.
Start using in new code — no need to refactor everything.
margin-inline: auto for centering.
Combine with dir attribute for RTL testing.
Be consistent: borders, padding, margin, sizing, positioning.

Common Pitfalls

Mixing physical and logical on the same element.
'inline' isn't always horizontal — vertical writing modes exist.
Not testing with dir='rtl'.
Using logical for truly physical things (shadows, etc.).

Browser Support

Chrome 87+, Safari 15+, Firefox 66+, Edge 87+. ~95% support.

CSS Flexbox Guide — already logical-aware
CSS Grid Best Practices — grid uses logical properties natively
Responsive Design Strategy — complements responsive techniques