Learn HTML and CSS: The box model

The box model

The price cards are stuck together, and the text is stuck to the edge of each card. "Where's the air?" asks Joanne.

Every element is a box

To the browser every element is a box, built from four layers from the inside out.

The content: the text or the image. The padding: space inside the box, between the content and the border; the background runs through it. The border. And the margin: space outside the border, towards the other boxes, always transparent.

Under the page you can see the first card's box as layers, with its sizes, just like in your browser's developer tools.

style.css

1.card {2  padding: 16px;3  border: 2px solid #2d6a4f;4  margin-bottom: 24px;5}

klimzaal.example

One, two or four values

padding: 16px gives all four sides 16px. With two values the first is for top and bottom, the second for left and right: padding: 8px 16px. With four values you go clockwise: top, right, bottom, left. For one side you write padding-top, padding-right, padding-bottom or padding-left. margin works the same way.

A border needs three things: a width, a style and a colour, like border: 2px solid #2d6a4f. Without a style (solid, dashed, dotted) you see nothing.

And with border-radius you round the corners.

style.css

1.notice {2  padding: 8px 16px;3  border: 2px dashed #e76f51;4  border-radius: 12px;5}

klimzaal.example

Try it yourself

Give every card (.card) 16px of padding on all sides, a border of 2px solid #2d6a4f, rounded corners of 16px and a 24px margin below.

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 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Every element is a box

To the browser every element is a box, built from four layers from the inside out.

Under the page you can see the first card's box as layers, with its sizes, just like in your browser's developer tools.

style.css

1.card {2  padding: 16px;3  border: 2px solid #2d6a4f;4  margin-bottom: 24px;5}

klimzaal.example

One, two or four values

A border needs three things: a width, a style and a colour, like border: 2px solid #2d6a4f. Without a style (solid, dashed, dotted) you see nothing.

And with border-radius you round the corners.

style.css

1.notice {2  padding: 8px 16px;3  border: 2px dashed #e76f51;4  border-radius: 12px;5}

klimzaal.example

Try it yourself

Give every card (.card) 16px of padding on all sides, a border of 2px solid #2d6a4f, rounded corners of 16px and a 24px margin below.

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