คู่มือ CSS Logical Properties: Writing Modes, RTL Support และ Modern Layouts

CSS Logical Properties replace physical directional keywords (top, right, bottom, left) with logical equivalents that adapt to the writing mode and text direction. Instead of margin-left, you write margin-inline-start — and it automatically becomes the correct side in both left-to-right and right-to-left layouts. This makes building truly internationalized UIs dramatically simpler.

Physical vs Logical: The Core Concept

Physical properties are tied to the screen coordinates. Logical properties are relative to the document's writing mode and text direction.

/* CSS Logical Properties vs Physical Properties */

/* PHYSICAL (old way) — tied to top/right/bottom/left */
.box {
  margin-top: 1rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
  margin-left: 2rem;

  padding-left: 1.5rem;
  padding-right: 1.5rem;

  border-left: 2px solid blue;

  width: 300px;
  height: 200px;
}

/* LOGICAL (new way) — relative to writing direction */
.box {
  margin-block: 1rem;        /* top + bottom  → block start + end */
  margin-inline: 2rem;       /* left + right  → inline start + end */

  padding-inline: 1.5rem;    /* horizontal padding in any direction */

  border-inline-start: 2px solid blue;  /* 'left' in LTR, 'right' in RTL */

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

Understanding Inline and Block Axes

Logical properties use two axes: inline (the direction text flows) and block (the direction blocks are stacked). In English, inline is horizontal and block is vertical. In vertical Japanese text, they swap.

/* Understanding inline vs block axes */

/*
  Horizontal writing mode (default English):
  - inline axis → left ←→ right  (text flows horizontally)
  - block axis  → top ↕ bottom   (blocks stack vertically)

  Vertical writing mode (Japanese, for example):
  - inline axis → top ↕ bottom   (text flows vertically)
  - block axis  → left ←→ right  (blocks stack horizontally)
*/

/* Logical shorthand properties */
.element {
  /* block = top/bottom, inline = left/right */
  margin-block: 1rem 2rem;      /* block-start: 1rem, block-end: 2rem */
  margin-inline: auto;          /* center horizontally (in LTR or RTL!) */

  padding-block-start: 0.5rem;  /* padding-top in LTR */
  padding-block-end: 0.5rem;    /* padding-bottom in LTR */
  padding-inline-start: 1rem;   /* padding-left in LTR, padding-right in RTL */
  padding-inline-end: 1rem;     /* padding-right in LTR, padding-left in RTL */

  /* Size */
  inline-size: 100%;            /* width in horizontal writing */
  min-inline-size: 200px;       /* min-width */
  max-inline-size: 800px;       /* max-width */
  block-size: auto;             /* height */

  /* Position (for position: absolute) */
  inset-block-start: 0;         /* top */
  inset-inline-start: 0;        /* left */
  inset: 0;                     /* all four sides */
}

RTL Support Without Duplicate CSS

The killer use case for logical properties: writing one set of CSS that works for both LTR (English, French) and RTL (Arabic, Hebrew) without any direction-specific overrides.

/* RTL support without duplicate CSS */

/* OLD WAY: separate RTL stylesheet */
/* main.css */
.sidebar {
  margin-left: 0;
  margin-right: 280px;
  padding-left: 1rem;
  border-right: 1px solid #ccc;
}

/* rtl.css (or [dir="rtl"] overrides) */
[dir="rtl"] .sidebar {
  margin-left: 280px;  /* override */
  margin-right: 0;
  padding-left: 0;
  padding-right: 1rem;
  border-right: none;
  border-left: 1px solid #ccc;
}

/* --------------------------------------- */

/* NEW WAY: logical properties handle it automatically */
.sidebar {
  /* No [dir="rtl"] override needed! */
  margin-inline-start: 0;
  margin-inline-end: 280px;       /* gap before main content */
  padding-inline-start: 1rem;
  border-inline-end: 1px solid #ccc;
  /* In RTL: margin-inline-start becomes right side automatically */
}

/* Example: icon + label that works in any direction */
.icon-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-label .icon {
  margin-inline-end: 0.5rem;  /* space between icon and label */
  /* In LTR: margin-right: 0.5rem */
  /* In RTL: margin-left: 0.5rem  — automatic! */
}

Borders and Border Radius

All border properties have logical equivalents, including the somewhat verbose border-radius logical properties.

/* Borders with logical properties */

/* Physical */
.card {
  border-top: 2px solid blue;
  border-bottom: 1px solid gray;
  border-left: 4px solid red;    /* accent border */
  border-right: none;

  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Logical */
.card {
  border-block-start: 2px solid blue;   /* top */
  border-block-end: 1px solid gray;     /* bottom */
  border-inline-start: 4px solid red;   /* left in LTR, right in RTL */
  border-inline-end: none;

  border-start-start-radius: 8px;  /* top-left in LTR */
  border-start-end-radius: 8px;    /* top-right in LTR */
}

/* Shorthand */
.card {
  border-block: 1px solid #eee;     /* top AND bottom */
  border-inline: 2px solid #ccc;    /* left AND right */
}

Migration Guide

How to systematically convert an existing codebase from physical to logical properties.

/* Migration strategy: replace physical with logical */

/* Step 1: Search & Replace mapping */
/*
  margin-top     → margin-block-start
  margin-bottom  → margin-block-end
  margin-left    → margin-inline-start
  margin-right   → margin-inline-end
  margin: T R B L → margin-block: T B; margin-inline: L R;

  padding-top    → padding-block-start
  padding-bottom → padding-block-end
  padding-left   → padding-inline-start
  padding-right  → padding-inline-end

  width          → inline-size
  height         → block-size
  min-width      → min-inline-size
  max-width      → max-inline-size
  min-height     → min-block-size
  max-height     → max-block-size

  top            → inset-block-start
  bottom         → inset-block-end
  left           → inset-inline-start
  right          → inset-inline-end
*/

/* Step 2: Enable writing mode for testing */
.test-rtl {
  direction: rtl;   /* test RTL layout without changing HTML */
}

.test-vertical {
  writing-mode: vertical-rl;  /* test vertical layout */
}

/* Step 3: Keep physical for TRULY physical things */
.avatar {
  /* These should stay physical — they don't relate to text direction */
  border-radius: 50%;        /* always round */
  width: 48px;               /* OR inline-size: 48px for consistency */
  height: 48px;
}

Complete Property Mapping Reference

Browser Support (2026)

All CSS Logical Properties have full browser support in 2026. The basic properties (margin-block, margin-inline, padding-block, padding-inline) have been supported since Chrome 87, Firefox 66, and Safari 14.1. Only the border-radius logical variants (border-start-start-radius, etc.) required Safari 15+ for full support.

Frequently Asked Questions