Physical properties such as margin-left assume a horizontal left-to-right page. Logical properties describe a position relative to the writing mode, so the same rule can adapt to right-to-left languages.

.card {
  margin-inline-start: 1rem;
  padding-block: 1rem;
  border-inline-start: 2px solid currentColor;
}

Think in inline and block directions

  • inline-start and inline-end follow the text direction.
  • block-start and block-end follow the block flow, usually top and bottom.
  • Keep physical properties where the design truly means a physical edge, such as a fixed-position icon in a map.

Test more than the text alignment

Switch the document's lang and dir attributes and inspect margins, borders, icons, and focus order. Logical CSS handles geometry; it does not translate labels or decide which content should be mirrored.

Use logical properties for reusable components and mixed-language sites. They reduce one-off RTL overrides and make the intended relationship clearer.