I stopped writing margin-left

For years I wrote margin-left and padding-top without thinking. Then a project needed a right-to-left locale, and every one of those physical directions was suddenly wrong. Logical properties fix this by describing position relative to the flow of text, not the physical screen.

Physical properties ask “which side of the screen?” Logical properties ask “which end of the reading direction?” Only one of those survives translation.

The mapping

Most physical properties have a logical twin. The common ones:

Physical	Logical
margin-left	margin-inline-start
margin-right	margin-inline-end
padding-top	padding-block-start
width	inline-size
height	block-size
text-align: left	text-align: start

Inline runs along the text; block stacks the lines. In English that means inline is horizontal and block is vertical — but the browser figures that out per locale, so you do not have to.

In practice

A centered reading column becomes direction-agnostic with one property:

.column {
  max-inline-size: 65ch;   /* not max-width */
  margin-inline: auto;     /* not margin-left/right */
  padding-inline: 1rem;
}

Switch the document to dir="rtl" and the layout mirrors itself. No media queries, no overrides, no second stylesheet.

I do not convert old code in a rush — physical properties still work. But for anything new, logical is the default now. It costs nothing and removes a whole class of bug before it exists.