BeingXpert Learn & Build Future

9. CSS Margins

What you will learn

  • What a margin is
  • How to set margins on one or all sides
  • The shorthand with one to four values
  • How to centre a block with margin: auto
  • What margin collapse means

What is a margin?

A margin is the empty space outside an element’s border. It pushes other elements away.

Margin on each side

Example

<style>
  .box {
    background-color: #cfe6ff;
    margin-top: 20px;
    margin-right: 40px;
    margin-bottom: 20px;
    margin-left: 60px;
  }
</style>

<p>Text above</p>
<div class="box">A box with different margins</div>
<p>Text below</p>

Output

Text above

A box with different margins

Text below

The shorthand

Values Meaning
margin: 20px; All four sides
margin: 10px 30px; Top and bottom 10px, left and right 30px
margin: 10px 20px 30px; Top 10px, left and right 20px, bottom 30px
margin: 10px 20px 30px 40px; Top, right, bottom, left (clockwise)

A trick to remember the order of four values: they go clockwise from the top.

Centring with auto

A block element with a set width can be centred horizontally with margin: 0 auto;. The browser splits the leftover space equally on the left and right.

Example

<style>
  .centered {
    width: 200px;
    margin: 0 auto;
    background-color: #0d6efd;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>

<div class="centered">I am centred</div>

Output

I am centred

Negative margins

A margin can be negative, which pulls an element toward its neighbour or makes it overlap. Use this rarely, because it can make layouts hard to predict.

Margin collapse

When the top and bottom margins of two blocks meet, they do not add up. The browser uses only the larger one.

Example

<style>
  .a { margin-bottom: 40px; background: #eaf5ff; }
  .b { margin-top: 20px; background: #cfe6ff; }
</style>

<div class="a">Box A (margin-bottom 40px)</div>
<div class="b">Box B (margin-top 20px)</div>

The gap between the boxes is 40px, not 60px. Side margins (left and right) never collapse.

Browsers give some elements default margins, such as paragraphs and headings. If spacing looks unexpected, press F12 and inspect the element to see its margin.

Common mistakes

  • Using margin: auto on an element with no width. A block already fills the line, so there is nothing to centre.
  • Expecting margin: 0 auto to centre text. Use text-align: center for text.
  • Adding up vertical margins that actually collapse.
  • Using margins to make space inside a box. That is the job of padding.

Exercise

Give .card a width of 250px, a light blue background (#eaf5ff), and centre it horizontally.

Show solution 
<style>
  .card {
    width: 250px;
    background-color: #eaf5ff;
    margin: 0 auto;
  }
</style>
<div class="card">Centre me</div>

Knowledge check

1. Is a margin inside or outside the border?

Outside.

2. In what order does a four-value margin run?

Top, right, bottom, left.

3. How do you centre a block with a fixed width?

margin: 0 auto;

Summary

  • Margins create space outside an element.
  • The shorthand takes one to four values.
  • margin: 0 auto centres a fixed-width block, and vertical margins can collapse.
Scroll to Top