CSS margin-bottom Property

What You’ll Learn

The margin-bottom property adds outer space below an element. It is one of the most common tools for vertical spacing in CSS layouts.

Introduction

The margin-bottom property in CSS is used to set the space outside the bottom edge of an element.

This property is part of the CSS Box Model and helps control the layout of web pages by adding space between elements. By adjusting the margin-bottom, you can ensure that elements on your page are spaced appropriately and do not overlap.

Definition and Usage

Apply margin-bottom when you need spacing below a single side of an element without changing top, left, or right margins. It is ideal for separating paragraphs, cards, form fields, and section blocks in vertical stacks.

📝 Syntax

The syntax for the margin-bottom property is simple and can accept various units for the value.

element {
  margin-bottom: value;
}

Here, value can be a length, percentage, or the keyword auto.

Basic Example

p {
  margin-bottom: 20px;
}

💎 Property Values

🎯 Default Value

The default value of the margin-bottom property is 0. This means that there is no additional space outside the bottom edge of the element unless explicitly set.

Examples Gallery

Add bottom margin to paragraphs, space stacked cards, use rem for typography rhythm, and compare with the logical equivalent.

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

<p>This paragraph has a bottom margin of 20px.</p>
<p>The space between this paragraph and the one above is due to the bottom margin.</p>

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

.card:last-child {
  margin-bottom: 0;
}

.article p {
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

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

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

margin-bottom in the Box Model

Margin sits outside the border. Bottom margin specifically adds transparent space below the element:

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

♿ Accessibility

• Keep readable paragraph spacing — Bottom margin helps separate blocks of text for easier reading.
• Do not rely on empty elements for spacing — Use margin instead of blank divs.
• Test zoomed layouts — Large bottom margins can push content off-screen on small viewports.
• Maintain touch target spacing — Buttons and links benefit from enough margin so they are easy to tap.
• Combine with semantic HTML — Margins adjust spacing; structure still comes from proper elements.

💡 Best Practices