A card layout may look correct in English and awkward after its text is translated into Arabic. A margin attached permanently to the left edge can end up on the wrong side of the reading flow. Logical properties let a stylesheet describe the intended relationship more directly.
MDN’s logical-properties guide explains the inline and block axes. Inline follows the direction of text within a line; block follows the progression of lines. Their physical orientation depends on the writing mode.
Describe the start of the content
For horizontal text, margin-inline-start can replace a margin that conceptually belongs before an element in reading order. It corresponds to the left in a left-to-right context and the right in a right-to-left context. This is different from a design requirement that genuinely means the physical left edge.
.notice {
padding-inline: 1rem;
border-inline-start: 0.25rem solid currentColor;
margin-block: 1rem;
}This small notice puts its accent at the start of the text flow. Test it inside containers with the appropriate HTML dir attribute rather than assuming that changing the language label automatically changes direction.
Review behaviour, not just property names
Check icons, mixed-direction text, keyboard order and alignment alongside spacing. A logical margin cannot repair a reading order that was arranged incorrectly in the markup. Equally, blindly mirroring every symbol can change the meaning of an icon that should remain fixed.
For a practical migration, choose one reusable component and replace only its direction-dependent rules. Compare screenshots in both directions, then inspect a narrow viewport and longer translated text. Keep a physical property when the design truly requires a physical position.
The goal is an explicit layout model. A future maintainer should be able to tell whether a space belongs to the reading flow or to a fixed side of the screen.