margin-inline-end

Avatar of Geoff Graham
Geoff Graham on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

The margin-inline-end property in CSS defines the amount of space along the outer ending edge of an element in the inline direction. It’s included in the CSS Logical Properties Level 1 specification, which is currently in Working Draft.

.element {
  margin-inline-end: 25%;
  writing-mode: vertical-lr;
}

The ending edge in the inline direction is determined by the element’s writing-mode, direction and text-orientation. So, when using margin-inline-end in a horizontal left-to-right context, it acts just like margin-right as the ending edge of the element is the right side.

But if we change the writing-mode to, say, vertical, the element is rotated clockwise, placing the ending edge toward the bottom. As a result, margin-inline-end behaves just like margin-bottom. Basically, the starting edge is relative to the direction it flows. That’s what we mean when talking about “logical” properties.

Syntax

margin-inline-end: <‘margin-top’>

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 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

margin-block-start accepts a single length or keyword value.

/* Length values */
margin-inline-end: 20px;
margin-inline-end: 2rem;
margin-inline-end: 25%;

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

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

Demo

Click the button in the following demo to see how the ending inline edge of the element changes with the writing-mode.

Browser support

IEEdgeFirefoxChromeSafariOpera
No79+41+69+12.1+56+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
YesYes81+12.2+59+
Source: caniuse

Further reading