Logical properties in CSS: margins and spacing that follow the writing direction

A site translated into Arabic or Hebrew renders right to left, and everything that used to sit against the left edge in English should flip to the right. Written with margin-left and padding-right, that site forces a rewrite of every directional property for the translated version, property by property, component by component.

Logical properties avoid that duplication by describing a spacing or a position relative to the direction text flows in, rather than relative to the physical edges of the screen.

Definition

A logical property such as margin-inline-start or padding-block-end replaces a physical property such as margin-left or padding-bottom, describing its position relative to the flow of the text: inline names the direction text is written along a line, block the direction blocks stack on top of one another.

.card {
  margin-inline-start: 24px; /* on the left in English, on the right in Arabic */
  padding-block: 16px 24px; /* padding-top then padding-bottom */
}

In English, as in most Latin-script languages, inline-start maps to the left and block-start to the top. None of the CSS needs to change for an Arabic translation to flip that result automatically.

A concrete example: the same CSS, two reading directions

The switch is driven by the HTML dir attribute or the CSS direction property, without touching a single line of the rest of the stylesheet.

/* the same CSS block applies to both HTML tags below */
.card {
  margin-inline-start: 24px;
}

/* <div class="card" dir="ltr">  -> 24px on the left */
/* <div class="card" dir="rtl">  -> 24px on the right, no CSS change */

Shorthands without start or end

When the same value applies to both sides of an axis, a shorthand avoids repeating start and end: margin-inline covers margin-inline-start and margin-inline-end at once, exactly the way margin covers all four physical sides in a single declaration.

.section {
  margin-inline: auto; /* centres horizontally, whatever the direction */
  padding-inline: 20px; /* padding-left and padding-right at once, in LTR */
}

Beyond margin and padding

text-align has its own logical values too, start and end, which usefully replace left and right to stay aligned with the writing direction. Sizing itself benefits as well: inline-size replaces width and block-size replaces height, which becomes useful the moment a vertical writing mode enters the picture, as with certain Japanese headings. Position itself follows the same vocabulary: inset-inline-start and inset-block-end replace left and bottom respectively on a positioned element, with exactly the same automatic flip depending on writing direction.

Frequently asked questions

No, only where writing direction genuinely matters: a site built for several languages, some of them right to left, or content likely to use a vertical writing mode. A project strictly in English or French, with no translation planned any time soon, gains no visible benefit from it right away.

inline follows the direction a line of text is written in, horizontal in most Western languages. block follows the direction paragraphs stack in, vertical in those same languages. A vertical writing mode can flip both.

Yes, the most common forms of margin-inline, padding-block and inset have been supported by every modern browser for several years now, with no prefix and no fallback needed.