margininlineend

Margin-inline-end is a CSS logical property that sets the end margin on the inline axis of an element. It is part of the CSS Logical Properties and Values module, designed to adapt layouts to different writing modes and directions without relying on fixed left or right margins. The “end” side is defined relative to the element’s inline direction, so its actual physical side changes with the writing mode and text direction.

In a typical horizontal writing mode (writing-mode: horizontal-tb) with left-to-right text, margin-inline-end corresponds to the right margin; with right-to-left text, it corresponds to the left margin. In vertical writing modes, the end of the inline axis aligns with the appropriate edge at the end of the inline progression, which may be bottom or top depending on the mode. This makes margin-inline-end useful for internationalized layouts where the visual order should adapt to language direction.

Syntax and values: margin-inline-end accepts a length, percentage, or the keyword auto, and also supports global values such as inherit, initial, unset, and revert. It can be used alongside related logical properties like margin-inline-start, margin-inline, margin-block-end, and margin-block-start to control spacing in a writing-mode-aware manner.

Browser support for margin-inline-end is broad in modern browsers, including Chrome, Edge, Firefox, and Safari. Its use promotes more flexible, direction-agnostic styling and cleaner separation between content flow and presentation in multilingual web interfaces.