CSS Logical Properties Explained

What and Why

For decades CSS used physical directions: margin-top, padding-left, border-right. They map perfectly to left-to-right languages and break the moment you set direction: rtl or switch to vertical writing modes. Logical properties replace them with block and inline axes that follow the writing direction automatically. Write once, ship for every language.

Mental Model

Think of two axes. The block axis runs along the text flow direction; in English it goes top to bottom. The inline axis runs along the line of text; in English it goes left to right. Each axis has a start and an end. In Arabic the inline start is on the right; in Japanese vertical writing the block start is on the right.

English (ltr)              Arabic (rtl)
inline-start -> inline-end   inline-end <- inline-start
|                            |
block-start                  block-start
v                            v
block-end                    block-end

Hands-on Example

Old physical CSS.

.card {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-left: 4px solid #2563eb;
}

Modern logical CSS.

.card {
  margin-block: 1rem;
  padding-inline: 1.5rem;
  border-inline-start: 4px solid #2563eb;
}

Both produce the same look in English. In Arabic the border now appears on the right, where the reader expects it, without changing the stylesheet.

Full mapping of common properties.

.box {
  /* margins */
  margin-block-start: 1rem;   /* was margin-top */
  margin-block-end:   1rem;   /* was margin-bottom */
  margin-inline-start: 0.5rem;/* was margin-left in ltr */
  margin-inline-end:   0.5rem;/* was margin-right in ltr */

  /* paddings use the same suffix */
  padding-block: 1rem;
  padding-inline: 1.5rem;

  /* sizing */
  block-size: 200px;          /* was height */
  inline-size: 320px;         /* was width */
  max-inline-size: 65ch;      /* was max-width */
}

Positioning uses inset properties.

.tooltip {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
}

inset-block-start is the new top for horizontal writing. The shorthand inset sets all four sides at once.

.modal {
  position: fixed;
  inset: 0;  /* same as top: 0; right: 0; bottom: 0; left: 0; */
}

Borders and border radii follow the same pattern.

.bubble {
  border-start-start-radius: 0.75rem; /* top-left in ltr, top-right in rtl */
  border-end-start-radius: 0.75rem;
}

The double word in start-start is correct. The first word is the block axis, the second is the inline axis.

A real-world example: a sidebar that flips for RTL languages.

<aside class="sidebar">Sidebar content</aside>

.sidebar {
  inline-size: 240px;
  border-inline-end: 1px solid #e2e8f0;
  padding-inline: 1rem;
  padding-block: 2rem;
}

html[dir="rtl"] .sidebar {
  /* nothing extra needed */
}

In RTL mode the border moves to the other side and the padding still feels symmetric, with no overrides.

Common Pitfalls

Mixing logical and physical properties in the same rule defeats the point. Pick one style per stylesheet, ideally logical, and convert old physical properties as you touch them.

Older browsers had partial support. Modern browsers (the last several years) support every logical property covered here, but if you must support very old environments, run autoprefixer or write a fallback for the most critical ones.

The mental model takes a few weeks. Reading margin-block as vertical works in horizontal writing mode but reverses in Japanese tategaki. If you intentionally rotate text, double check that block still means what you think.

Transforms and other geometric operations still use the physical X and Y. Logical properties cover the box model, not transforms. For mirrored interfaces, you may still need to negate translateX in RTL.

Practical Tips

Start with new components. The next form or card you build can use logical properties from the start. Refactor older components when they need changes anyway.

Use the shorthand pairs early. margin-block, padding-block, margin-inline, and padding-inline cover most cases in one line.

Combine logical properties with dir="rtl" on a small subtree to preview RTL during development. You will catch hard-coded left values immediately.

Pair logical properties with CSS variables that hold spacing tokens. The combination scales to a full design system that supports international layouts with no per-language overrides.

Wrap-up

Logical properties are a small change with a large payoff. The names take a day to learn and pay back every time you ship to a new locale or experiment with vertical writing. Convert top, right, bottom, and left into block and inline equivalents, lean on the shorthand pairs, and your layouts will keep their meaning across the world’s writing systems.