CSS margin-top Property

What You’ll Learn

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

Introduction

The margin-top property in CSS is used to set the top margin of an element.

The margin is the space outside the border of an element, which separates it from other elements on the page. By adjusting the margin-top, you can position elements vertically and control the layout of your web page.

Definition and Usage

Apply margin-top when you need spacing on only the top side without changing bottom, left, or right margins. It is ideal for separating headings from content, spacing stacked sections, and creating gaps between paragraphs.

📝 Syntax

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

element {
  margin-top: value;
}

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

Basic Example

p {
  margin-top: 20px;
}

💎 Property Values

🎯 Default Value

The default value of the margin-top property is 0. This means that there is no margin applied to the top of the element unless explicitly specified.

Examples Gallery

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

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

<h1>Paragraph with Custom Top Margin</h1>
<p>This paragraph has a top margin of 20px, pushing it down from the heading above.</p>
<p>Another paragraph with the same margin, creating consistent spacing.</p>

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

.card + .card {
  margin-top: 1rem;
}

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

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

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

margin-top in the Box Model

Margin sits outside the border. Top margin specifically adds transparent space above the element:

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

♿ Accessibility

• Keep readable paragraph spacing — Top margin helps separate headings from body content for easier reading.
• Do not rely on empty elements for spacing — Use margin instead of blank divs.
• Test zoomed layouts — Large top 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