The margin-inline-start CSS property controls the logical margin on the "start" side of an element's inline axis. In practical terms it creates space between the element and whatever lies at the beginning of the inline flow for that element. Which physical edge it corresponds to (left, right, top or bottom) is determined by the element’s writing direction and script orientation, so the same rule adapts automatically for left-to-right vs right-to-left text and for vertical writing modes.

Because it is a logical property, margin-inline-start is intended to replace hard-coded physical margins (for example, when you would otherwise use margin-left) so your layout behaves correctly across languages and writing directions. It applies to block-level boxes and to inline-level boxes with slightly different effects: on block-level boxes it affects how the box is offset inside its containing block along the inline axis and influences available inline space; on inline-level boxes it affects spacing at the start edge of the inline box and therefore can alter line breaking and text flow. Unlike block-axis start/end margins, inline margins do not participate in the margin-collapsing rules that govern vertical (block-axis) margins.

Practical use of margin-inline-start is mainly about creating direction-agnostic spacing and simplifying internationalization: prefer it over physical properties when you want consistent start-side spacing regardless of writing-mode or text direction. It pairs naturally with its logical counterpart margin-inline-end and with logical shorthands such as margin, enabling symmetric or asymmetric inline spacing without switching values for different locales. Because logical properties resolve based on writing-mode and direction, using them reduces the need for runtime swapping of CSS rules when supporting RTL languages or vertical text.