CSS Logical Properties: Write Once, Support Every Writing Direction

Physical CSS properties (margin-left, padding-right, border-top) are written assuming left-to-right, top-to-bottom text. For RTL languages (Arabic, Hebrew) or vertical writing modes (traditional Chinese, Japanese), you historically needed to override them manually.

CSS Logical Properties replace physical directions with writing-mode-relative equivalents. Write them once and they work correctly in any direction.

The Core Concept

Instead of thinking in terms of "left/right/top/bottom," think in terms of:

Inline axis — the direction text flows (horizontal in LTR, horizontal but reversed in RTL, vertical in some East Asian modes).
Block axis — perpendicular to text flow (vertical in most cases).

Physical	Logical Equivalent
`top`	`block-start`
`bottom`	`block-end`
`left`	`inline-start`
`right`	`inline-end`

Margin and Padding

/* Physical — breaks in RTL */
.card {
    margin-left: 1rem;
    padding-right: 1.5rem;
}
 
/* Logical — works in all directions */
.card {
    margin-inline-start: 1rem;
    padding-inline-end: 1.5rem;
}

In LTR, inline-start maps to left. In RTL, it maps to right. You don't need to override anything.

Shorthand Logical Properties

/* Set inline (left + right) and block (top + bottom) together */
.section {
    margin-inline: auto;         /* Centers horizontally */
    padding-block: 2rem;         /* Top and bottom padding */
    padding-inline: 1.5rem;      /* Left and right padding */
}

This replaces:

.section {
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

Width and Height

/* Physical */
.box {
    width: 300px;
    height: 200px;
    min-width: 100px;
    max-height: 500px;
}
 
/* Logical */
.box {
    inline-size: 300px;
    block-size: 200px;
    min-inline-size: 100px;
    max-block-size: 500px;
}

In vertical writing modes, inline-size becomes the height and block-size becomes the width — automatically.

Borders and Inset

/* Physical — border only on the left */
.highlight {
    border-left: 3px solid oklch(0.6 0.2 260);
}
 
/* Logical — border on the text-start side */
.highlight {
    border-inline-start: 3px solid oklch(0.6 0.2 260);
}

For positioned elements, top/left/bottom/right become inset-block-start, inset-inline-start, etc.:

/* Physical */
.tooltip {
    position: absolute;
    top: 0;
    right: 0;
}
 
/* Logical */
.tooltip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
}
 
/* Shorthand for all four sides */
.tooltip {
    inset: 0 0 auto auto; /* Still physical-ordered for shorthand */
}

Text Alignment

/* Physical — always left-aligns */
.label {
    text-align: left;
}
 
/* Logical — aligns to text start (left in LTR, right in RTL) */
.label {
    text-align: start;
}

Full Reference Map

Physical	Logical
`margin-top`	`margin-block-start`
`margin-bottom`	`margin-block-end`
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
`padding-top`	`padding-block-start`
`width`	`inline-size`
`height`	`block-size`
`top`	`inset-block-start`
`left`	`inset-inline-start`
`float: left`	`float: inline-start`
`text-align: left`	`text-align: start`

Browser Support

Logical properties have full support in all modern browsers. The shorthand forms (margin-inline, padding-block) are fully supported since 2021.

Logical properties are not just for RTL support — they make CSS more semantic and easier to reason about in any writing mode. Adopt them in new components as a baseline practice.