CSS margin-left Property

What You’ll Learn

The margin-left property adds outer space on the left side of an element. It is one of the most common tools for horizontal spacing and alignment in CSS.

Introduction

The margin-left property in CSS is used to set the left margin of an element. This property allows you to create space to the left of an element, pushing it away from the elements on its left.

Margins are essential for controlling the layout and spacing of elements on a web page, providing a clean and organized appearance.

Definition and Usage

Apply margin-left when you need spacing on only the left side without changing top, right, or bottom margins. It is ideal for indenting paragraphs, offsetting cards, and creating horizontal gaps between inline or block elements.

📝 Syntax

The syntax for the margin-left property is straightforward. You can specify the value using different units, such as pixels (px), percentages (%), ems (em), and more.

element {
  margin-left: value;
}

Here, value can be a length, percentage, or one of the global values (inherit, initial, unset).

Basic Example

p {
  margin-left: 30px;
}

💎 Property Values

🎯 Default Value

The default value of the margin-left property is 0, meaning no extra space is added to the left of the element. Override it when you need spacing on the left outer edge.

Examples Gallery

Add left margin to a paragraph, indent nested content, offset a card from the edge, and compare with the logical equivalent.

<style>
  p {
    margin-left: 30px;
  }
</style>

<p>This paragraph has a left margin of 30 pixels.</p>

ul ul {
  margin-left: 1.5rem;
}

.card {
  margin-left: 2rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  max-width: 16rem;
}

/* Physical */
.note {
  margin-left: 1.5rem;
}

/* Logical equivalent in horizontal LTR */
.note {
  margin-inline-start: 1.5rem;
}

margin-left in the Box Model

Margin sits outside the border. Left margin specifically adds transparent space on the left side of the element:

• Content — text or child elements inside the box.
• Padding — inner space between content and border.
• Border — the visible edge.
• Margin-left — outer space on the left side of the border.

♿ Accessibility

• Keep indentation meaningful — Left margin can indent nested content without breaking semantics.
• Do not rely on empty elements for spacing — Use margin instead of blank divs.
• Test zoomed layouts — Large left margins can push content off-screen on small viewports.
• Consider RTL layouts — Use logical properties when direction may change.
• Combine with semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices