CSS margin-inline Property

What You’ll Learn

The margin-inline property sets outer spacing on the inline axis using logical sides instead of physical left and right margins.

Introduction

The margin-inline property in CSS is a shorthand property that sets the margin on the inline-start and inline-end sides of an element.

Unlike the margin-left and margin-right properties, which set margins relative to the physical left and right, margin-inline adjusts margins based on the logical order of content. This makes it especially useful in multilingual and internationalized web design, where text direction can vary between left-to-right (LTR) and right-to-left (RTL) languages.

Definition and Usage

Apply margin-inline when you want horizontal spacing that stays correct when direction changes. Use one value for equal inline-start and inline-end margins, or two values for different spacing on each side.

📝 Syntax

The syntax for the margin-inline property can be written in several ways, depending on the number of values specified:

element {
  margin-inline: start end;
}

• If one value is provided, it applies to both margin-inline-start and margin-inline-end.
• If two values are provided, the first value applies to margin-inline-start and the second to margin-inline-end.

Basic Example

p {
  margin-inline: 20px 40px;
}

💎 Property Values

🎯 Default Value

The default value of margin-inline is 0, meaning no margin is applied to the inline-start and inline-end sides by default. You can override it with one or two values, or with the longhand properties margin-inline-start and margin-inline-end.

Examples Gallery

Set different inline-start and inline-end margins, apply a single value, see RTL direction behavior, and compare with longhand properties.

<style>
  p {
    margin-inline: 20px 40px;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<p>This paragraph has 20px inline-start and 40px inline-end margin.</p>

.card {
  margin-inline: 1.5rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.box {
  margin-inline: 1rem 2rem;
  padding: 0.75rem;
  background: #eff6ff;
}

.rtl {
  direction: rtl;
}

/* Shorthand */
.panel {
  margin-inline: 1rem 2rem;
}

/* Longhand equivalent */
.panel {
  margin-inline-start: 1rem;
  margin-inline-end: 2rem;
}

Logical vs Physical Margins

♿ Accessibility

• Preserve reading order — Logical margins respect direction, which helps RTL and multilingual users.
• Keep horizontal spacing consistent — Use inline-axis margins for gutters and side spacing in content blocks.
• Do not hide content with negative margins — Negative inline margins can overlap focusable elements.
• Test zoom and small screens — Large inline margins can push content off-screen on narrow viewports.
• Combine with semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices