Design Atlas
한국어
▦ Layout

Logical properties

논리적 속성

Properties phrased in terms of text flow — inline-start / inline-end — instead of left / right, so they follow automatically when the language switches to RTL or a vertical writing mode.

Also known as: CSS Logical Propertiesinset-inline-startmargin-inline
···
html
<div class="wrap">
  <div class="row" id="demo">
    <div class="col">
      <b class="lbl">physical</b>
      <div class="box phys"><span class="accent"></span><i class="ln"></i><i class="ln"></i></div>
    </div>
    <div class="col">
      <b class="lbl">logical</b>
      <div class="box logi"><span class="accent"></span><i class="ln"></i><i class="ln"></i></div>
    </div>
  </div>
  <div class="dirtag" id="dirtag">dir: ltr</div>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(94%,440px)}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:100%}
.col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px}
.lbl{font:700 10px/1 ui-monospace,monospace;color:var(--muted);text-align:center}
.box{position:relative;height:96px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.accent{position:absolute;top:0;bottom:0;width:6px;background:var(--accent-2)}
.phys .accent{left:0}
.logi .accent{inset-inline-start:0}
.ln{display:block;height:8px;border-radius:3px;background:var(--line);width:60%;transition:margin .6s}
.phys .ln{margin-left:16px}
.logi .ln{margin-inline-start:16px}
.dirtag{font:700 11px/1 ui-monospace,monospace;color:var(--accent-2);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:4px 8px}
js
const demo = document.getElementById('demo');
const dirtag = document.getElementById('dirtag');
let rtl = false;
setInterval(() => {
  rtl = !rtl;
  demo.setAttribute('dir', rtl ? 'rtl' : 'ltr');
  dirtag.textContent = 'dir: ' + (rtl ? 'rtl' : 'ltr');
}, 1800);

"Physical" properties — margin-left, left, padding-right — always point at an actual screen direction. Switch a page to a right-to-left language like Arabic or Hebrew, and margin-left: 14px still creates 14px on the visual left — but in RTL, "start" is the right, so that margin now sits on the opposite side from where the text flow begins.

Logical properties are named after text flow instead of screen coordinates. margin-inline-start means "the margin on the side where text begins" — the left in LTR, the right in RTL, automatically. inset-inline-start (a left/right that flips with RTL) and padding-block (top/bottom's counterpart) follow the same idea: inline is the axis text flows along, block is the axis lines stack along.

Under vertical writing modes (writing-mode: vertical-rl, used in traditional Japanese and Chinese typesetting), inline and block swap which screen axis they even point at. Written with logical properties, a layout follows every one of those changes — language, direction, writing mode — without a single value being touched, which makes them close to mandatory for any multilingual product.

When to use

If a product might ever support an RTL language like Arabic or Hebrew, it's worth defaulting to logical properties from the start rather than retrofitting margin-left/right, left/right and padding-left/right later. If every supported language is LTR with no plans otherwise, it's not urgent.