Traditional CSS often describes layout with physical directions: left, right, top, and bottom. That is intuitive until the same component must work in a right-to-left language or a different writing mode.

Logical properties describe layout relative to the flow of text. Instead of saying “left padding,” you can say “padding at the inline start.” The browser maps that intent to the correct physical edge.

Think in block and inline axes

CSS logical layout uses two axes:

  • the inline axis, along which text normally flows;
  • the block axis, along which lines and blocks are stacked.

For common left-to-right English text, inline start is left and block start is top. For right-to-left text, inline start becomes right. Other writing modes can change the mapping further.

That makes this declaration more reusable:

.card {
  padding-inline: 1rem;
  padding-block: 0.75rem;
}

It expresses the intended relationship without encoding a specific language direction.

Replace directional spacing with logical spacing

Physical spacing often appears in component CSS:

.icon {
  margin-right: 0.5rem;
}

If the icon precedes text, the real intent is usually “put space after the icon in the text direction.” Write that intent directly:

.icon {
  margin-inline-end: 0.5rem;
}

The same component can then work under dir="ltr" and dir="rtl" without a separate override.

Useful pairs include:

margin-left   -> margin-inline-start
margin-right  -> margin-inline-end
margin-top    -> margin-block-start
margin-bottom -> margin-block-end

The same pattern applies to padding, border, and inset positioning.

Use logical sizing when the axis matters

width and height are physical dimensions. inline-size and block-size describe size relative to the writing mode.

.article {
  max-inline-size: 70ch;
}

.sidebar {
  inline-size: 18rem;
}

For ordinary horizontal writing these behave like max-width and width. The advantage is that the component states which axis it intends to constrain.

Physical dimensions are still appropriate when the physical measurement itself matters, such as an image crop or viewport-oriented animation.

Position components without assuming left or right

Logical inset properties are useful for badges, menus, and absolutely positioned controls:

.badge {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
}

In a left-to-right layout, the badge appears near the top-right corner. In a right-to-left layout, it moves to the top-left because that is now the inline end.

This is more robust than maintaining [dir="rtl"] overrides for every physical edge.

Know when mirroring is not desired

Not everything should follow text direction. A media player’s timeline, a compass, or a diagram with real-world orientation may have physical meaning.

Similarly, some icons should mirror in right-to-left interfaces while others should not. Logical CSS handles layout direction, but product semantics still determine whether artwork or interaction direction should change.

Use logical properties when the relationship is tied to document flow. Keep physical properties when the relationship is genuinely physical.

Test direction at the document boundary

A useful check is to render the same component under both directions:

<div dir="ltr">...</div>
<div dir="rtl">...</div>

Look for:

  • spacing attached to the wrong side;
  • controls pinned to a physical edge;
  • borders that no longer align with reading order;
  • overflow caused by fixed physical widths;
  • transforms or icons that need separate semantic handling.

Testing a whole page is useful, but isolated component tests make directional assumptions easier to spot.

Migrate incrementally

A codebase does not need a single large conversion. Start with reusable components and declarations whose intent clearly follows text flow.

For example, this is a low-risk migration:

.notice {
  border-inline-start: 4px solid currentColor;
  padding-inline-start: 1rem;
  margin-block-end: 1rem;
}

The accent border and its padding stay together regardless of writing direction.

Avoid mechanical replacement where semantics are unclear. left: 0 might mean inline start, but it might also intentionally mean the physical left edge of the viewport.

Common pitfalls

Mixing logical and physical declarations accidentally

If a component sets both margin-left and margin-inline-start, the cascade can become difficult to reason about. Prefer one model for the same concern.

Assuming logical properties only matter for RTL

They also make component intent clearer and support other writing modes. Internationalization is the strongest reason, but maintainability is another benefit.

Mirroring content that has physical meaning

Directional layout should adapt; maps, charts, media timelines, and some icons may require separate decisions.

Design around relationships, not coordinates

Logical properties work best when CSS describes relationships such as “space after this label” or “place this control at the inline end.” That abstraction matches how reusable components are designed.

Using inline and block vocabulary does require an initial mental shift. In return, components depend less on assumptions about language direction and become easier to reuse across global interfaces.

CSS Logical Properties Internationalization Frontend