Margin-inline | CSS-Tricks

margin-inline is a shorthand property in CSS that sets an element’s margin-inline-start and margin-inline-end values, both of which are logical properties. It creates space around the element in the inline direction, which is determined by the element’s writing-mode, direction, and text-orientation.

The property is part of the CSS Logical Properties and Values Level 1 specification which is currently in Editor’s Draft status. That means the definition and information about it can change between now and official recommendation.

.element {
  margin-inline: 60px auto;
  writing-mode: vertical-rl; /* Determines the inline start direction */
}

If the writing-mode is set to horizontal-lr, the margin-inline property will act just like setting margin-left and margin-right. One interesting aspect of this property is is that it is one of the logical properties that doesn’t have a one-to-one map with a non-logical property. There is no older property that sets both (and only) the inline direction margins.

But change the element’s writing-mode to something like vertical-lr and the “inline” edges are rotated in the vertical direction, acting more like the margin-top and margin-bottom properties.

Syntax

margin-inline: <'margin-top'>{1,2}

It’s kinda weird to see the syntax of one property reference the syntax of another CSS property right in the documentation, but that’s really what it is. What it’s basically trying to say is that the property accepts the same values as margin-top (up to two times) which follows this syntax:

margin-top: <length> | <percentage> | auto;

Initial value: 0
Applies to: all elements except internal table elements, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: as for the corresponding physical property
Computed value: same as corresponding margin-* properties
Animation type: by computed value type

Values

If you’re familiar with the margin shorthand property, then margin-inline will feel very familiar. The only difference is that it works in two directions instead of four.

/* Length values */
margin-inline: 20px 40px;
margin-inline: 2rem 4rem;
margin-inline: 25% 15%;
margin-inline: 20px; /* a single value sets both values */

/* Keyword values */
margin-inline: auto;

/* Global values */
margin-inline: inherit;
margin-inline: initial;
margin-inline: unset;