CSS margin-inline-start Property

What You’ll Learn

The margin-inline-start property sets outer spacing on the inline-start side of an element using logical layout instead of physical left margin.

Introduction

The margin-inline-start property in CSS is used to set the logical start margin of an element, depending on the writing mode, text directionality, and text orientation.

This property is useful for creating layouts that support different writing modes, such as left-to-right (LTR) and right-to-left (RTL) languages, without needing to adjust the margin values manually for each direction.

Definition and Usage

Apply margin-inline-start when you need spacing before an element on the inline axis without affecting the inline-end side. Common uses include indenting paragraphs, offsetting icons beside text, and building flexible multilingual layouts.

📝 Syntax

The syntax for the margin-inline-start property is as follows:

element {
  margin-inline-start: value;
}

Here, value can be any valid CSS length, percentage, or global value.

Basic Example

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

💎 Property Values

🎯 Default Value

The default value of the margin-inline-start property is 0, which means no margin is applied to the start of the inline axis. Override it when you need spacing before an element on the inline axis.

Examples Gallery

Add inline-start margin to a paragraph, indent nested content, see RTL direction behavior, and compare with physical margin-left.

<style>
  p {
    margin-inline-start: 20px;
  }
</style>

<p>This paragraph has a margin at the start of the inline axis.</p>

blockquote {
  margin-inline-start: 2rem;
  padding: 1rem;
  border-inline-start: 4px solid #2563eb;
  background: #f8fafc;
}

.note {
  margin-inline-start: 1rem;
  padding: 0.75rem;
  background: #eff6ff;
}

.rtl {
  direction: rtl;
}

/* Logical */
.card {
  margin-inline-start: 1.5rem;
}

/* Physical equivalent in horizontal LTR */
.card {
  margin-left: 1.5rem;
}

Logical vs Physical Margins

♿ Accessibility

• Preserve reading order — Logical margins respect direction, which helps RTL and multilingual users.
• Keep indentation meaningful — Inline-start margin can indent quotes and nested content without breaking semantics.
• Avoid negative margins on focusable elements — Negative inline-start margins can overlap previous interactive controls.
• Test zoom and small screens — Large inline-start margins can push content off-screen on narrow viewports.
• Use semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices