CSS margin-inline Property

Description

The margin-inline CSS property is used to set the margin space on the inline axis (typically the horizontal axis in left-to-right writing systems like English). It allows for precise control over the space around inline-level elements, such as text or inline-block elements, in a way that respects the document's writing direction. This property is particularly useful in multilingual or bidirectional layouts, ensuring consistent spacing regardless of text direction. It can take values like auto, lengths, or percentages to specify the margin size, and it can be combined with margin-block to control both horizontal and vertical margins comprehensively. Individual properties are: margin-inline-end and margin-inline-start.

Initial value: See individual properties
Applies to: same as margin
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.marginInline

Interactive Demo

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;
unicode-bidi:bidi-override;

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

One

Two

Three

Syntax

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

Values

<margin-top> {1,2}Specifies margin-block in px, pt, cm, etc. Negative values are allowed.

Example

HTML

<div>

  <p>Example text</p>

</div>

<div class="verticalExample">

  <p>Example text</p>

</div>

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

Result

Editor