Learn HTML and CSS: Collapsing margins

Collapsing margins

Joanne put a 24px margin below the heading and 16px above the paragraph, and expected 40px of space. She measures 24px. "Where did the rest go?"

The biggest one wins

When two margins meet above and below each other, they don't add up: they collapse, and the biggest one wins. A heading with a 24px margin below and a paragraph with a 16px margin above give 24px of space, not 40px.

This only goes for top and bottom margins. Left and right margins and padding never collapse.

In the box model under the page you can see how much of the heading's margin is really used.

style.css

1.news h2 {2  margin-bottom: 24px;3}4.news p {5  margin-top: 16px;6}

klimzaal.example

A margin that leaks out

A first child's margin can collapse with its parent's too. Give the heading in a card margin-top: 32px, and if the card has no padding and no border at the top, that margin leaks out: the space appears above the card, not in it.

If you want the space inside the card, give the card itself padding-top. Padding or a border keeps the child's margin inside.

style.css

1.card h2 {2  margin-top: 32px;3}

klimzaal.example

Try it yourself

Make sure there's exactly 32px of space between the notice and the cards below it.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>The Steep Wall climbing centre</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>The Steep Wall</h1>12      <p class="slogan">Climbing centre in Ilkley</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prices.html">Prices</a>17        <a href="lessons.html">Lessons</a>18      </nav>19    </header>20    <main>21      <p class="notice">We're closed on Saturday 12 April for a competition.</p>22      <section class="cards">23        <article class="card">24          <h2>Day pass</h2>25          <p class="price">£14</p>26          <p>Climb all day, for as long as your arms hold out.</p>27          <a class="button" href="buy.html">Buy</a>28        </article>29        <article class="card">30          <h2>Ten-visit pass</h2>31          <p class="price">£120</p>32          <p>Ten visits, valid for a year.</p>33          <a class="button" href="buy.html">Buy</a>34        </article>35      </section>36      <section class="news">37        <h2>News</h2>38        <p>There are twelve new routes in the bouldering room, from green to black.</p>39        <p>There's a beginners' class every Tuesday. We'll lend you climbing shoes.</p>40        <p>On Wednesday afternoons the youth club climbs. Feel free to come and watch.</p>41      </section>42    </main>43    <footer>44      <p>7 Handhold Lane, Ilkley</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.notice {25  background-color: #ffe8d6;26}27.card {28  padding: 0 16px;29  background: #ffffff;30}31.price {32  font-size: 1.5rem;33  font-weight: bold;34}35.button {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.news {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example

Ready for more?

The full lesson has 4 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

The biggest one wins

This only goes for top and bottom margins. Left and right margins and padding never collapse.

In the box model under the page you can see how much of the heading's margin is really used.

style.css

1.news h2 {2  margin-bottom: 24px;3}4.news p {5  margin-top: 16px;6}

klimzaal.example

A margin that leaks out

If you want the space inside the card, give the card itself padding-top. Padding or a border keeps the child's margin inside.

style.css

1.card h2 {2  margin-top: 32px;3}

klimzaal.example

Try it yourself

Make sure there's exactly 32px of space between the notice and the cards below it.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>The Steep Wall climbing centre</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="greep.svg" alt="" width="40" height="40">11      <h1>The Steep Wall</h1>12      <p class="slogan">Climbing centre in Ilkley</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prices.html">Prices</a>17        <a href="lessons.html">Lessons</a>18      </nav>19    </header>20    <main>21      <p class="notice">We're closed on Saturday 12 April for a competition.</p>22      <section class="cards">23        <article class="card">24          <h2>Day pass</h2>25          <p class="price">£14</p>26          <p>Climb all day, for as long as your arms hold out.</p>27          <a class="button" href="buy.html">Buy</a>28        </article>29        <article class="card">30          <h2>Ten-visit pass</h2>31          <p class="price">£120</p>32          <p>Ten visits, valid for a year.</p>33          <a class="button" href="buy.html">Buy</a>34        </article>35      </section>36      <section class="news">37        <h2>News</h2>38        <p>There are twelve new routes in the bouldering room, from green to black.</p>39        <p>There's a beginners' class every Tuesday. We'll lend you climbing shoes.</p>40        <p>On Wednesday afternoons the youth club climbs. Feel free to come and watch.</p>41      </section>42    </main>43    <footer>44      <p>7 Handhold Lane, Ilkley</p>45    </footer>46  </body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #eef3ee;5  color: #1f2a24;6}7header {8  padding: 16px;9  background: #2d6a4f;10  color: #ffffff;11}12header h1 {13  margin: 4px 0 0;14}15.slogan {16  margin: 0 0 8px;17}18nav a {19  color: #ffffff;20}21main {22  padding: 0 16px 24px;23}24.notice {25  background-color: #ffe8d6;26}27.card {28  padding: 0 16px;29  background: #ffffff;30}31.price {32  font-size: 1.5rem;33  font-weight: bold;34}35.button {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.news {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example