margin-inline

Avatar of Geoff Graham
Geoff Graham on (Updated on )

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;

Demo

Browser support

IEEdgeFirefoxChromeSafariOpera
NoNo66+87+NoNo
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
YesYesNoNo59+
Source: caniuse

Further reading