margin-inline CSS property - CSS | MDN

Toggle sidebar

Theme

OS default
Light
Dark

English (US)

Remember language Learn more

margin-inline CSS property

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

* Some parts of this feature may have varying levels of support.

The margin-inline CSS shorthand property defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Try it

margin-inline: 5% 10%;
writing-mode: horizontal-tb;

margin-inline: 10px 40px;
writing-mode: vertical-rl;

margin-inline: 5% 10%;
writing-mode: horizontal-tb;
direction: rtl;

<section id="default-example">
  <div id="container">
    <div class="col">One</div>
    <div class="col transition-all" id="example-element">Two</div>
    <div class="col">Three</div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
  unicode-bidi: bidi-override;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css
/* <length> values */
margin-inline: 10px 20px; /* An absolute length */
margin-inline: 1em 2em; /* relative to the text size */
margin-inline: 5% 2%; /* relative to the nearest block container's width */
margin-inline: 10px; /* sets both start and end values */
margin-inline: anchor-size(width);
margin-inline: calc(anchor-size(self-block) / 5) auto;

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

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

This property corresponds to the margin-top and margin-bottom, or the margin-right and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation.

The margin-inline property may be specified using one or two values.

When one value is specified, it applies the same margin to both start and end.
When two values are specified, the first margin applies to the start, the second to the end.

Values

The margin-inline property takes the same values as the margin-top property.

Formal definition

Initial valueApplies toInheritedPercentagesComputed value Animation type

as each of the properties of the shorthand:

margin-inline-start: 0
margin-inline-end: 0

same as margin

depends on layout model

as each of the properties of the shorthand:

margin-inline-start: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
margin-inline-end: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto

a length

Formal syntax

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

<margin-top> =
<length-percentage> |
auto |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
This syntax reflects the latest standard as per CSS Anchor Positioning Module Level 1, CSS Box Model Module Level 4, CSS Logical Properties and Values Module Level 1, CSS Values and Units Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

Setting inline start and end margins

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}

HTML

html
<div>
  <p>Example text</p>
</div>
<div class="verticalExample">
  <p>Example text</p>
</div>

Result

Specifications

Specification

CSS Logical Properties and Values Module Level 1
# propdef-margin-inline

Browser compatibility

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Apr 20, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content