How margin-inline follows the text direction

margin-inline is often described as a shorter way to set left and right margins. That is true for horizontal English text, but it misses the useful part: the property follows the writing direction rather than fixed physical sides.

.card {
  margin-inline: 1rem;
}

In a left-to-right horizontal writing mode, this creates left and right margins. In a vertical writing mode, the inline axis runs vertically, so the affected sides change as well.

One value or two

One value applies to both inline sides:

.card {
  margin-inline: 1rem;
}

Two values set the start and end separately:

.card {
  margin-inline: 1rem 2rem;
}

You can also address those sides with margin-inline-start and margin-inline-end.

A common use is centring a block with a known width:

main {
  max-inline-size: 70rem;
  margin-inline: auto;
}

I prefer logical properties for layout code unless a design genuinely depends on a physical side. They are no harder to read once the naming clicks, and they avoid a later pile of direction-specific overrides.

← Back to all articles