CSS Logical Properties

ELI5 — The Vibe Check

Logical properties replace left/right with start/end so your CSS works in any text direction — left-to-right, right-to-left, even vertical. It's like giving directions as 'turn toward the start' instead of 'turn left,' so they work no matter which way you're facing.

Real Talk

CSS Logical Properties map layout to document flow direction rather than physical screen coordinates. Properties like margin-inline-start, padding-block-end, and inline-size replace their physical counterparts. Essential for internationalization and RTL language support.

Show Me The Code

.card {
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 3px solid blue;
  inline-size: 300px;
}

When You'll Hear This

"Switch to logical properties so the layout automatically supports Arabic and Hebrew" / "Use margin-inline: auto instead of margin-left: auto; margin-right: auto"