Codectionary / Developer documentation / CSS

Logical Properties

Logical properties describe direction in terms of writing mode (inline/block flow) rather than fixed physical directions (left/right/top/bottom). margin-inline-start behaves like margin-left in English but automatically adapts for right-to-left languages, making them essential for properly internationalized layouts.

Syntax

margin-inline-start, padding-block, inset-inline-end

Examples

Physical vs Logical Properties

The same intent, expressed in a way that adapts to writing direction.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}

/* Physical - assumes left-to-right, breaks in RTL languages */
.old {
  margin-left: 16px;
  border-right: 1px solid gray;
}

/* Logical - automatically flips for RTL languages like Arabic or Hebrew */
.modern {
  margin-inline-start: 16px;
  border-inline-end: 1px solid gray;
}
  1. The same physical and logical classes appear under two direction settings.
  2. A physical left margin remains on the left, while an inline-start margin follows the inline direction.
  3. Compare the labelled pairs; direction belongs to the HTML and does not translate the text.
HTML used by this example
<div class="preview-row"><section dir="ltr"><h3>Left to right</h3><p class="old">Physical</p><p class="modern">Logical</p></section><section dir="rtl"><h3>Right to left</h3><p class="old">Physical</p><p class="modern">Logical</p></section></div>

Block and Inline Direction

Common shorthand logical properties for spacing.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.card{border:1px solid #0f766e}.preview-vertical{writing-mode:vertical-rl;max-height:14rem}

.card {
  padding-block: 16px;   /* top and bottom, in the block direction */
  padding-inline: 24px;  /* left and right, in the inline direction */
}
  1. Both boxes use the same logical padding declarations.
  2. Changing writing-mode changes which physical direction is block and which is inline.
  3. Compare the box edges rather than equating block with top/bottom in every writing mode.
HTML used by this example
<div class="preview-row"><article class="card">Horizontal writing</article><article class="card preview-vertical">Vertical writing</article></div>

Parameters and values

  • margin-inline-start/end (length): Logical equivalent of margin-left/right in LTR
  • padding-block (length): Shorthand for padding-top and padding-bottom
  • inset-inline / inset-block (length): Logical equivalents of left/right and top/bottom for positioning

Best practices

  • Use logical properties by default in new projects, even if you are not currently building a multilingual site - they cost nothing and future-proof the layout
  • This matters most for genuinely internationalized products supporting right-to-left languages like Arabic or Hebrew
  • Logical properties exist for nearly every physical spacing/sizing/positioning property - margin, padding, border, inset, width (inline-size), and height (block-size)
  • Mixing physical and logical properties in the same project is fine during migration, but aim for consistency within a single component

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading