Logical properties: write layout rules by meaning, not direction

Physical properties describe the screen: left, right, top, bottom, width, height. Logical properties describe the flow of the document: inline start, inline end, block start, block end, inline size, block size.

For many English-only sites, physical properties appear to work. The benefit of logical properties is not only internationalization. They also make the CSS intent clearer.

When you write margin-inline: auto, you are saying “center this on the text flow axis.” When you write border-inline-start, you are saying “put the accent where the line starts.” That meaning is more durable than “left” or “right.”

Replace direction with flow

.article {
  max-inline-size: 68ch;
  margin-inline: auto;
  padding-block: 3rem;
}

This says the article has a readable inline measure, is centered on the inline axis, and has block spacing. It is more descriptive than max-width, margin-left, margin-right, padding-top, and padding-bottom.

Logical properties map to physical directions based on writing mode and direction. In English left-to-right text, inline-start maps to left. In right-to-left text, it maps to right. In vertical writing modes, inline and block axes rotate.

Borders and callouts become safer

.note {
  border-inline-start: 0.35rem solid var(--note-accent);
  padding-inline-start: 1rem;
}

If the document direction changes, the accent stays at the start of the line. That is the behavior the component probably wanted.

The same idea applies to spacing around icons, media objects, sidebars, and inline controls. If the spacing belongs to text flow, use the inline axis. If the spacing belongs to vertical rhythm, use the block axis.

Use logical sizing in layout primitives

inline-size, block-size, min-inline-size, and min-block-size are especially useful in shared layout code.

.media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
}

The rule is about the inline axis. It is not about a western left-to-right screen assumption. This matters for intrinsic sizing: min-inline-size: 0 tells the item it can shrink on the text flow axis.

Sticky and absolute positioning also have logical equivalents.

.toc {
  position: sticky;
  inset-block-start: 1rem;
}

This says the table of contents sticks near the start of the block axis. In a standard document, that means the top. The rule describes behavior rather than physical placement.

Physical exceptions are valid

Use physical properties when the physical side is the product requirement.

A notification badge pinned to the visual top-right of an avatar.
A decorative texture anchored to the bottom of a hero.
A screenshot annotation placed at a specific visual corner.
A drag handle that must appear on one physical side of a resizable panel.

The point is not to ban left, right, top, and bottom. The point is to stop using them by default when the layout really follows content flow.

Migration does not need to be dramatic

Start where logical properties reduce future mistakes: new layout primitives, shared spacing utilities, reusable components, text-heavy components such as callouts and forms, and overflow fixes using min-inline-size.

Avoid noisy mechanical rewrites in old code if they do not improve readability. A mixed codebase is acceptable when new work uses the better model and old work is converted when touched for real layout reasons.

.article-card {
  max-inline-size: 42rem;
  margin-inline: auto;
  padding-block: 1.5rem;
}

This is the kind of migration worth doing. It reduces declarations, improves meaning, and does not change the component API. If a rewrite only swaps property names without improving clarity, wait.

Debug with axes in mind

Logical properties are also useful when debugging because they force you to name the axis that is failing. Horizontal overflow in a standard English document is usually inline overflow. A sticky header threshold is usually a block-start inset. A card that refuses to shrink usually needs min-inline-size: 0, not a random width override.

This vocabulary keeps fixes closer to the real problem. If a component uses padding-inline, gap, and max-inline-size, it is easier to see whether a bug belongs to reading measure, vertical rhythm, or a physical decoration. The CSS becomes a map of layout intent instead of a list of screen edges.

Use physical properties deliberately at integration boundaries where the outside system is physical. Canvas overlays, screenshot annotations, and drag handles may need literal top-right or bottom-left positioning. That is fine. The benefit is choosing that exception consciously instead of writing physical directions by habit.