CSS Logical Properties

Logical properties replace directional terms like "left," "right," "top," and "bottom" with flow-relative terms like "start," "end," "inline," and "block." This makes your CSS automatically adapt to different writing directions — left-to-right English, right-to-left Arabic, and top-to-bottom Japanese — without any extra code.

The Problem with Physical Properties

DIAGRAM — Physical properties break in RTL languages:

English (left-to-right):
  margin-left: 16px   → gap appears on the LEFT (correct for LTR)
  ← text flows this way

Arabic (right-to-left):
  margin-left: 16px   → gap still appears on the LEFT (wrong for RTL!)
  text flows this way →

You wanted the gap at the "start" of the text.
"Start" is left in English, right in Arabic.

DIAGRAM — Logical properties fix this automatically:

margin-inline-start: 16px

English (LTR): gap appears on the LEFT  ← "start" in LTR
Arabic (RTL):  gap appears on the RIGHT ← "start" in RTL

One rule works for both languages.

Two Axes — Inline and Block

Logical properties use two axes that adapt to the writing direction:

• Inline axis — the direction text flows (horizontal in English, vertical in Japanese)
• Block axis — the direction blocks stack (vertical in English, horizontal in Japanese)

DIAGRAM — Axes in English (horizontal writing):

         ← inline →         (text flows left to right)
  ┌──────────────────────┐
  │ Text text text text  │  ↑
  │ Text text text text  │  block  (blocks stack top to bottom)
  │ Text text text text  │  ↓
  └──────────────────────┘

Block start = top    Block end = bottom
Inline start = left  Inline end = right

DIAGRAM — Axes in Arabic (right-to-left inline):

  → inline ←         (text flows right to left)
  ┌──────────────────────┐
  │  صص صص صص صص         │ 
  │  صص صص صص صص         │  block
  │  صص صص صص صص         │  ↓
  └──────────────────────┘

Block start = top    Block end = bottom
Inline start = right  Inline end = left

Physical vs Logical Property Mapping

Shorthand Logical Properties

margin-inline and margin-block

/* Physical */
margin-left: 16px;
margin-right: 16px;

/* Logical shorthand — sets both inline sides */
margin-inline: 16px;

/* Physical */
margin-top: 24px;
margin-bottom: 24px;

/* Logical shorthand — sets both block sides */
margin-block: 24px;

/* Different values for start and end */
margin-inline: 8px 24px; /* start: 8px, end: 24px */

padding-inline and padding-block

.card {
  padding-inline: 20px;  /* left + right in LTR */
  padding-block: 16px;   /* top + bottom */
}

inset — Replaces top/right/bottom/left

/* Physical — four properties */
top: 0;
right: 0;
bottom: 0;
left: 0;

/* Logical shorthand */
inset: 0; /* all four sides */

inset-inline: 0;   /* left and right in LTR */
inset-block: 0;    /* top and bottom */
inset-inline-start: 16px; /* just the start side */

inline-size and block-size

/* Physical */
width: 300px;
height: 200px;

/* Logical */
inline-size: 300px;  /* width in horizontal writing */
block-size: 200px;   /* height in horizontal writing */

.modal {
  max-inline-size: 600px;   /* max-width */
  min-block-size: 200px;    /* min-height */
}

Text Alignment

/* Physical — always left */
text-align: left;

/* Logical — adapts to writing direction */
text-align: start; /* left in LTR, right in RTL */
text-align: end;   /* right in LTR, left in RTL */

Float and Clear

/* Physical */
float: left;

/* Logical */
float: inline-start; /* floats to the "start" side of text flow */

Border Radius — Logical Corners

/* Physical */
border-top-left-radius: 8px;

/* Logical */
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 — Navigation Item

/* Physical — breaks in RTL */
.nav-item {
  padding-left: 16px;
  border-left: 3px solid blue;
  text-align: left;
}

/* Logical — works in any direction */
.nav-item {
  padding-inline-start: 16px;
  border-inline-start: 3px solid blue;
  text-align: start;
}

DIAGRAM — nav-item with logical properties:

LTR (English):         RTL (Arabic):
│                       │
│▌ Item text            text Item ▐│
│▌ Item text            text Item ▐│
│                       │

The blue border and padding automatically
appear on the correct side.

The writing-mode Property

Logical properties fully work with writing-mode — a property that changes the direction blocks and inline content flow.

/* Normal horizontal (default) */
writing-mode: horizontal-tb;  /* top to bottom, left to right */

/* Vertical (Japanese-style) */
writing-mode: vertical-rl;    /* right to left, vertical text */
writing-mode: vertical-lr;    /* left to right, vertical text */

.vertical-heading {
  writing-mode: vertical-rl;
  margin-block-end: 16px;     /* still works correctly in vertical mode */
}

When to Use Logical Properties

Use logical properties when:

• Building multilingual sites that support RTL languages (Arabic, Hebrew, Persian, Urdu)
• Creating vertical text layouts
• Building a design system or component library that others will use in diverse projects
• Working with CSS writing-mode on any element

For single-language LTR-only sites, physical properties work fine and are more readable for most developers today. Logical properties become essential the moment your site needs to support more than one writing direction.

Browser Support

All logical properties have full support in modern browsers — Chrome, Firefox, Safari, and Edge. inset as a shorthand requires relatively recent versions. Always check caniuse.com for the exact properties you use.

Logical properties future-proof your CSS. A component written with padding-inline-start instead of padding-left works correctly in any language, any direction, any writing mode — with zero extra code.