CSS propertyBox model

margin-inline

Sets the margins at the start and end of a line. The logical version of margin-left and margin-right, aware of writing direction.

Initial value: 0
Inherited: No
Animatable: yes, as a length or percentage
Applies to: all elements except internal table elements
JavaScript: element.style.marginInline = "auto"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar .logout {
  margin-inline-start: auto;
}

Example HTML

<style>
  .toolbar { padding: 8px 12px; border-radius: 12px; background: #18181b; }
  .toolbar + .toolbar { margin-top: 10px; }
  .toolbar a { color: inherit; text-decoration: none; }
  .toolbar .logout { padding: 4px 12px; border-radius: 8px; background: #3f3f46; }
</style>
<nav class="toolbar">
  <strong>CodeWorlds</strong>
  <a href="#">Courses</a>
  <a href="#" class="logout">Log out</a>
</nav>
<nav class="toolbar" dir="rtl">
  <strong>CodeWorlds</strong>
  <a href="#">Courses</a>
  <a href="#" class="logout">Log out</a>
</nav>

Preview

One rule handles both directions. In the top bar, the logout button lands on the right, and in the bottom one, with dir="rtl", on the left, with no extra styles at all.

Definition and usage

The margin-inline property is shorthand for margin-inline-start and margin-inline-end, the margins at the start and end of the inline axis. The inline axis runs the way text flows within a line. In English that means left and right, so margin-inline: 16px works like margin-left: 16px; margin-right: 16px.

The difference shows up with a different writing direction. In Arabic or Hebrew (dir="rtl"), a line starts on the right, so the start margin moves there too. In vertical writing (writing-mode: vertical-rl), lines run top to bottom, and the inline margins land on the top and bottom. A physical margin-left stays on the left no matter the language.

The twin shorthand margin-block sets the margins on the block axis, along which consecutive paragraphs stack. In ordinary horizontal text that’s top and bottom, with the components margin-block-start and margin-block-end. In both shorthands, one value lands on both ends, and two mean start and end in turn. Each can be a length, a percentage, or auto.

A useful detail: margin-inline: auto centers a block with a fixed width and leaves the top and bottom margins untouched, unlike margin: 0 auto. Margins on the block axis collapse between neighbors the same way top and bottom margins do.

Syntax

margin-inline: <start> <end>?;
margin-block: <start> <end>?;

Values

40px
<length>
One value: 40px at the start and end of the line, meaning left and right. The background stripes show the margins.
80px 0
start end
The first value is the start, the second the end. In left-to-right text, the margin only shows up on the left.
auto
With a fixed width (here inline-size: 140px), auto on both sides centers the block, and the top and bottom margins stay unchanged.
dir="rtl"
right-to-left text
The same 80px 0 declaration, but inside a container with dir="rtl". The line starts on the right, so the margin moves there too.
vertical-rl
vertical writing mode
In vertical writing, the line runs top to bottom, so the start margin lands at the top. The element sits at the right edge, because in vertical-rl consecutive blocks stack from right to left.
margin-block: 24px
block axis
The shorthand for the block axis. In horizontal text it adds 24px above and below the element.

Value	Type	Description
40px	<length>	One value: 40px at the start and end of the line, meaning left and right. The background stripes show the margins.
80px 0	start end	The first value is the start, the second the end. In left-to-right text, the margin only shows up on the left.
auto		With a fixed width (here `inline-size: 140px`), `auto` on both sides centers the block, and the top and bottom margins stay unchanged.
dir="rtl"	right-to-left text	The same `80px 0` declaration, but inside a container with `dir="rtl"`. The line starts on the right, so the margin moves there too.
vertical-rl	vertical writing mode	In vertical writing, the line runs top to bottom, so the start margin lands at the top. The element sits at the right edge, because in `vertical-rl` consecutive blocks stack from right to left.
margin-block: 24px	block axis	The shorthand for the block axis. In horizontal text it adds 24px above and below the element.

Values in practice

40px

One value: 40px at the start and end of the line, meaning left and right. The background stripes show the margins.

.demo { margin-inline: 40px; }

80px 0

The first value is the start, the second the end. In left-to-right text, the margin only shows up on the left.

.demo { margin-inline: 80px 0; }

auto

With a fixed width (here inline-size: 140px), auto on both sides centers the block, and the top and bottom margins stay unchanged.

.demo { inline-size: 140px; margin-inline: auto; }

dir="rtl"

The same 80px 0 declaration, but inside a container with dir="rtl". The line starts on the right, so the margin moves there too.

.demo { margin-inline: 80px 0; }

vertical-rl

In vertical writing, the line runs top to bottom, so the start margin lands at the top. The element sits at the right edge, because in vertical-rl consecutive blocks stack from right to left.

.lane { writing-mode: vertical-rl; width: 100%; height: 150px; }
.demo { margin-inline: 40px 0; }

margin-block: 24px

The shorthand for the block axis. In horizontal text it adds 24px above and below the element.

.demo { margin-block: 24px; }

Browser support

Widely available · since 2021

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

To center a page container, margin-inline: auto is all you need. Unlike margin: 0 auto, it doesn’t reset top and bottom margins set in another rule.
In a flex row, margin-inline-start: auto pushes an element to the end of the row, and automatically to the other side in a right-to-left layout.
If a site might one day get an Arabic or Hebrew version, write components on logical properties from the start. All you’ll need later is dir="rtl" on the <html> element.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course