margin-inline

The preview on this page paints the margin orange. The preview is horizontal, left to right, so the start is the left and the end is the right.

Writing the value

• One value applies to both sides. Two values apply to the start (margin-inline-start) and the end (margin-inline-end), in that order.
• It takes the same values as margin: lengths, %, auto, and negative values. A % is a share of the parent's size in the inline direction (its width in horizontal writing).
• The initial value is 0.

How the direction changes it

• With direction: rtl, for languages written right to left, the start is the right and the end is the left.
• In vertical writing such as writing-mode: vertical-rl, the start is the top and the end is the bottom.
• Which sides they are depends on the element's own writing-mode and direction, not on its parent's.

Stack it with a writing-mode block on the top page to see the same value move the margins to the top and bottom.

When to use it

• margin-inline: auto: centers a block element with a set width between the left and right.
• Spacing an icon from its text with margin-inline-end keeps the space on the text side in right-to-left languages too.

Watch out

• In horizontal writing, it refers to the same sides as margin-left and margin-right. When an element has both, the one written later wins.
• Margins in the inline direction never collapse with a neighbor's margin (collapsing happens only to margins in the block direction).
• Works in all major browsers.