margin-inline and Friends: CSS That Survives Translation

Here's a test: your design indents quoted text from the left and puts a border on that side. A user switches to Arabic - right-to-left. The indent and border are now on the wrong side, because margin-left means the physical left forever, while the reading direction flipped underneath it.

/* Physical - breaks in RTL */
blockquote {
    margin-left: 24px;
    border-left: 3px solid #4f46e5;
    text-align: left;
}

/* Logical - flips automatically with direction */
blockquote {
    margin-inline-start: 24px;
    border-inline-start: 3px solid #4f46e5;
    text-align: start;
}

Set dir="rtl" on the html element and the logical version mirrors itself: start becomes the right side, the border moves, the indent moves, done. The mapping is simple: inline = the text-flow axis (left/right in English), block = the stacking axis (top/bottom), with -start and -end replacing the compass directions.

The part nobody advertises: better shorthands for everyone

Even if RTL never touches your roadmap, the two-value axis shorthands fix a real annoyance - "horizontal padding only" used to require either the four-value dance or two declarations:

.button {
    padding-inline: 20px;      /* left+right in one property */
    padding-block: 10px;       /* top+bottom */
    margin-block-start: 2rem;
}

.container {
    max-inline-size: 65ch;     /* logical max-width */
    margin-inline: auto;       /* the new "margin: 0 auto" - without touching block margins */
}

margin-inline: auto is my most-typed logical property: horizontal centering that doesn't clobber vertical margins the way margin: 0 auto always did.

The full substitution table, abridged

• width/height → inline-size / block-size (and their min/max variants)
• top/left/right/bottom → inset-block-start / inset-inline-start / inset-inline-end / inset-block-end (plus the inset and inset-inline shorthands)
• border-left → border-inline-start; border-radius corners → border-start-start-radius etc.
• text-align: left/right → start/end

Positioned elements benefit especially: inset-inline-end: 16px pins a close button to the reading-direction end of a toast - exactly where users expect it in either direction.

Pragmatics

Support is universal (2021+ for everything listed). Physical and logical mix fine, so migrate opportunistically: new components logical, old ones as touched. Keep physical properties where the meaning genuinely is physical - a shadow cast by a light source, a left-handed/right-handed UI control - direction-mirroring those would be wrong. The heuristic: if it relates to content flow, logical; if it relates to physics, physical. Most of your margins are content flow.