Margins

You will be able to use CSS margins to control the transparent space outside an element, separate it from neighbouring elements, and center block-level elements horizontally.

What it is

A margin is the outer spacing in the CSS box model. The box model has four layers: content, padding, border, and margin. Margins sit outside the border and push other elements away. They are usually transparent, so the page background shows through.

Related terms include margin-top, margin-right, margin-bottom, margin-left, the margin shorthand, auto margins, negative margins, and margin collapse.

Why it matters

• It creates breathing room between cards, buttons, paragraphs, and sections.
• It helps center a block element horizontally when the element has a width.
• It controls spacing without changing the element's inner content area.
• It can be used with selectors like .card + .card to manage spacing between repeated items.
• It supports responsive layouts when combined with media queries or logical properties.

Syntax or steps

The smallest useful pattern is the margin shorthand. Values follow the order top, right, bottom, left when four values are given.

/* All sides */
.card {
  margin: 16px;
}

/* Top, right, bottom, left */
.card {
  margin: 8px 16px 24px 16px;
}

/* Individual sides */
.card {
  margin-top: 8px;
  margin-bottom: 24px;
}

/* Center a block element horizontally */
.card {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

Example

<style>
body {
  font-family: sans-serif;
  background: #f5f5f5;
  padding: 24px;
}

.card {
  width: 320px;
  margin: 0 auto 24px;
  padding: 16px;
  border: 1px solid #ccc;
  background: #fff;
}
</style>

<div class="card">
  <h2>First card</h2>
  <p>This card is centered horizontally.</p>
</div>

<div class="card">
  <h2>Second card</h2>
  <p>Each card has 24px of space below it.</p>
</div>

Part by part:

• body { padding: 24px; } adds space inside the page, so the first card is not flush with the top edge.
• .card { width: 320px; } gives the block element a fixed width, which is needed for horizontal centering with auto.
• margin: 0 auto 24px; sets top margin to 0, left and right margins to auto, and bottom margin to 24px.
• padding: 16px; creates space inside the card, between the border and the text.
• The second card appears below the first with a clear gap because of the bottom margin.

Common mistakes

• Confusing margin with padding. Margin is outside the border; padding is inside the border. If the background should fill the space, use padding.
• Expecting vertical margins to work on inline elements. Inline elements such as span can use horizontal margins, but vertical margins are usually ignored. Use display: inline-block or a block-level element if vertical spacing is needed.
• Assuming adjacent vertical margins always add together. In normal flow, adjacent vertical margins can collapse into one margin equal to the larger value. This is called margin collapse.
• Using margin: auto without a width. A block element with auto left and right margins needs a width smaller than its container to center.

When to use it

Use margins when you need space outside an element. Use padding when you need space inside the element. Use gap when laying out flex or grid children.

Practice

Guided exercise: Create a .note element with width: 280px, margin: 0 auto 16px, padding: 12px, and border: 1px solid #999.

Expected output: The note is centered horizontally and has 16px of space below it.

Challenge: Add two notes and use .note + .note { margin-top: 0; }. Observe how the spacing behaves.

Solution hint: The first note keeps its bottom margin. The second note has no top margin, so the visible gap is controlled by the first note's bottom margin.

Quick check

What does margin: 0 auto; do on a block element with a width?

It sets the top and bottom margins to 0 and the left and right margins to auto, which centers the element horizontally inside its container.

Summary

Margins are the outer spacing layer of the CSS box model. They separate elements, create layout breathing room, and can center block elements when used with auto and a width. Choose margins for outside spacing, padding for inside spacing, and gap for flex or grid item spacing.