CSS margin-inline-end Property

The margin-inline-end property controls the logical margin on the “end” side of an element along the inline axis. Because it is a logical (rather than physical) property, the side it affects depends on the element’s writing direction and orientation: in a left-to-right horizontal flow it corresponds to the right side, while in right-to-left it corresponds to the left side; in vertical writing modes the “end” will map to whichever physical side corresponds to the inline-axis end for that mode. This mapping is determined by the document’s text orientation and flow, so the same declaration adapts automatically when you change orientation via writing-mode or text direction via direction.

Because it is one of the logical margin properties, margin-inline-end composes with the other margin declarations in the cascade and shorthand rules. It is the inline-axis counterpart to the start side, so it pairs naturally with margin-inline-start and can be set together with the shorthand margin-inline. Likewise, broader shorthands such as margin can override or be overridden by a later margin-inline-end declaration depending on order and specificity. This makes it useful for fine-grained adjustments when a global margin shorthand is already in use.

In layout contexts, margin-inline-end affects spacing along the inline axis and therefore influences how elements separate from siblings or the container’s inline edge. In grid and flex layouts it participates in alignment and spacing behaviors for items along the inline axis; because it targets the logical inline direction, it remains correct for internationalized layouts without needing separate left/right rules. Note that collapsing of margins is a block-axis behavior, so inline-axis margins like margin-inline-end do not participate in margin collapsing the way vertical (block-axis) margins do.

From a practical perspective, prefer logical properties like margin-inline-end when authoring stylesheets intended for multilingual or rotated layouts: they reduce the need for conditional rules and make your intent explicit (adjust the inline-end spacing) rather than tied to physical sides. When you need to coordinate visual offset or spacing with positioning or box-offset properties, consider using corresponding logical properties such as inset-inline-end (for offsets) or related logical padding properties so all adjustments respond consistently to changes in writing-mode and direction.