How to Add Margin in CSS

Use margin when you need space outside an element. This is the most common way to separate sections, cards, buttons, images, and text blocks so the layout feels easier to scan.

What you’ll build or solve

You’ll learn how to add margin in CSS using one value or side-specific values. You’ll also know when margin is the right choice instead of padding.

When this approach works best

This approach is the right choice when two separate elements are too close together.

Common real-world scenarios include:

• Space between sections
• Space below headings
• Gap between cards
• Extra room around images
• Better spacing between buttons

This is a bad idea when the space should appear inside the element. In that case, use padding instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Add the margin property to the element

Use one value to apply the same outside spacing on all sides.

<div class="card">USA pricing</div>

<style>
  .card {
    margin: 20px;
  }
</style>

For directional spacing, switch to a side-specific margin.

<h2 class="section-title">France pricing</h2>

<style>
  .section-title {
    margin-bottom: 32px;
  }
</style>

What to look for:

• One value adds equal margin on all sides
• margin-bottom is common for vertical spacing
• Use side-specific margins for precise control
• Margin creates space outside the element
• Use padding instead for inner spacing

Examples you can copy

Space below a heading

<h1 class="hero-title">UK pricing</h1>

<style>
  .hero-title {
    margin-bottom: 24px;
  }
</style>

Card spacing

<div class="card">USA course plan</div>

<style>
  .card {
    margin: 16px;
  }
</style>

Button spacing

<button class="cta">Start lesson</button>

<style>
  .cta {
    margin-top: 20px;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using padding instead of margin

What the reader might do:

<div class="card">USA pricing</div>

<style>
  .card {
    padding-bottom: 30px;
  }
</style>

Why it breaks: padding adds inner space, so the element grows instead of separating from the next block.

Corrected approach:

<style>
  .card {
    margin-bottom: 30px;
  }
</style>

Mistake 2: Adding margin to the wrong element

What the reader might do:

<section>
  <h2>France plan</h2>
</section>

<style>
  section {
    margin-bottom: 24px;
  }
</style>

Why it breaks: the spacing may apply to the full section when the real goal is only to separate the heading.

Corrected approach:

<style>
  h2 {
    margin-bottom: 24px;
  }
</style>

Mistake 3: Using huge fixed margins

What the reader might do:

.card {
  margin-top: 200px;
}

Why it breaks: large fixed values often create awkward gaps, especially on mobile.

Corrected approach:

.card {
  margin-top: 24px;
}

Use smaller, intentional spacing values first.

Troubleshooting

If the space appears inside the element, switch from padding to margin.

If the wrong block moves, apply the margin to the exact target element.

If the gap feels too large on mobile, reduce fixed pixel values.

If spacing seems inconsistent, standardize values like 16px, 24px, or 32px.

Quick recap

• Use margin for space outside elements
• One value applies to all sides
• Use side-specific values like margin-bottom
• Use padding for inner spacing
• Keep spacing values intentional and consistent