CSS logical properties for LTR and RTL

When you lay out a page with physical properties like margin-left and padding-right, you are baking in a left-to-right assumption. Logical properties describe the block and inline axes instead, so a component mirrors itself correctly when a site serves Arabic or Hebrew in right-to-left mode, or when a view flips for vertical writing. The cost is a vocabulary difference: margin-inline-start instead of margin-left. The payoff is that one set of CSS works in both directions with no overrides.

Logical vs physical

Physical properties are locked to the screen axis. margin-left is always the physical left edge. Logical properties map to the direction content flows. In left-to-right text, margin-inline-start is the left margin. In right-to-left text, the same value becomes the right margin, mirroring the component automatically. The block axis is the other flow direction: for horizontal text, padding-block-start is the top padding, and in vertical writing it becomes the start of the vertical column.

Key properties

The main substitution is straightforward. Replace edge choices with axis choices:

• margin-inline in place of margin-left plus margin-right, with margin-inline-start and margin-inline-end for one side.
• padding-block for padding-top and padding-bottom, and padding-block-start / padding-block-end for either end.
• inset-inline and inset-block for positioning with top/right/bottom/left.

Because they are Baseline-supported across modern browsers, these are safe to use today in any current design. The behavioral difference only shows when the page switches direction or writing mode, which is exactly where physical properties normally break:

.cta {
    margin-inline-start: 1rem;
    padding-block: 0.75rem 1rem;
}

Mirrored for Arabic (dir="rtl" on a container), .cta automatically places its spacing on the opposite inline edge with no extra rules.

When direction changes

Logical properties pay off the moment a page has an RTL region or an internationalized site. The same PHP or template renders either direction without a second stylesheet. They also make vertical writing modes, such as Japanese, usable from the same declaration set. There is no performance cost; the browser resolves the logical value to a physical one at layout time, so you trade a few keystrokes of new naming for a robust, direction-agnostic layout.

Adopt them now

Adopting them is incremental rather than all-or-nothing. Start new components with logical properties, and convert the edges that actually need to mirror, generally the inline axis, first. Keep physical properties for what is genuinely about the screen, such as a fixed physical offset or an absolute overlay. Be deliberate on elements with borders and transforms where the mapping can surprise you, and document the convention so a later edit does not reintroduce a physical edge in the middle of a mirrored component.

Test both directions

Add an RTL check to your QA. Give a test page or a wrapper dir="rtl" and confirm that spacing, icons and alignment flip rather than overlap. Mirror icons and backgrounds that assume an arrow direction, because CSS can flip spacing while an embedded glyph still points the wrong way. A quick RTL pass catches the overrides you did not write, which is the point of the system.

Related layout work

Logical properties sit alongside the other fundamentals of a component's geometry. The box-model guide explains the physical box these properties size, and the em versus rem reference covers the sizing units you are likely to combine with them.