CSS margin-inline Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The margin-inline property controls the amount of outer spacing on the inline axis of a box — that is, the space before and after the box in the direction text flows. It operates at the logical-axis level rather than naming physical sides, so it sets both inline-start and inline-end margins together as a paired logical shorthand for margin-inline-start and margin-inline-end. Using this logical shorthand makes it easy to express "start" and "end" inline spacing in a single declaration without caring about which physical edges those correspond to.

Because the inline axis maps onto different physical edges depending on the page’s orientation and text direction, the actual sides affected by margin-inline depend on layout-related properties such as writing-mode and direction. In practice that means a single margin-inline rule will adapt automatically when you switch between left‑to‑right and right‑to‑left text or between horizontal and vertical writing modes. It also participates in normal cascading and specificity rules and interacts with the traditional physical shorthand — for example, declarations from the margin shorthand or explicit physical margin properties can override or be overridden according to the cascade and source order.

Authors commonly prefer margin-inline when writing components that must be direction‑ and writing‑mode‑agnostic, because it reduces the need for separate rules for LTR/RTL or vertical layouts. It composes naturally with other inline-axis logical properties such as padding-inline and inset-inline to control spacing and positioning along the same axis. Note also that inline-axis margins affect inline spacing and line-wrapping behavior rather than block-axis margin-collapsing behavior, so their layout effects and interactions differ from block-axis margins.

Definition

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 class='wrapper'>

  <h1>CSS margin-inline demo</h1>



  <section class='example ltr'>

    <h2>LTR (default)</h2>

    <div class='container'>

      <div class='box'>Box with margin-inline: 2rem;</div>

    </div>

  </section>



  <section class='example rtl'>

    <h2>RTL (direction: rtl)</h2>

    <div class='container'>

      <div class='box'>Box with margin-inline: 2rem;</div>

    </div>

  </section>

</div>

CSS

/* Styles for margin-inline demonstration */
:root {
  --bg: #f8fafc;
  --panel: #f1f5f9;
  --accent: #2563eb;
  --text: #0f172a;
}
* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: var(--text);
  margin: 2rem;
}
.wrapper {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 1.25rem;
}
.example {
  background: var(--panel);
  padding: 1rem;
  border-radius: 8px;
}
.container {
  background: #fff;
  padding: 1rem;
  margin-top: 0.75rem;
}
.box {
  background: var(--accent);
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  /* margin-inline sets both inline-start and inline-end margins.
     In LTR this is left/right; in RTL it follows the inline axis and flips. */
  margin-inline: 2rem;
}
/* Flip writing direction to demonstrate that margin-inline follows the inline axis */
.example.rtl .container {
  direction: rtl;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS margin-inline property. Hover over a browser icon to see the version that first introduced support for this CSS property.