Learn HTML and CSS: Display

Display

Joanne gave the buttons padding, but now they run over the text above. And the menu links refuse to take a width. It's not the padding, it's the kind of box.

Block, inline and in between

With display you choose how a box behaves. A block starts on a new line and takes the full width, like <p>, <h2>, <div> and <section>.

An inline element sits in the line between the words, like <a>, <span> and <strong>. It ignores a width or height, and padding and margin above and below don't push the lines aside.

inline-block is the best of both: it sits in the line, but it's a real box, with a width and padding that count. And display: none makes an element disappear completely.

style.css

1.button {2  display: inline-block;3  padding: 8px 16px;4  margin-top: 8px;5}

klimzaal.example

Try it yourself

Make the notice disappear completely, and turn the menu links into little buttons: inline-block, with 8px 12px of padding.

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

Start the lesson

Block, inline and in between

With display you choose how a box behaves. A block starts on a new line and takes the full width, like <p>, <h2>, <div> and <section>.

An inline element sits in the line between the words, like <a>, <span> and <strong>. It ignores a width or height, and padding and margin above and below don't push the lines aside.

inline-block is the best of both: it sits in the line, but it's a real box, with a width and padding that count. And display: none makes an element disappear completely.

style.css

1.button {2  display: inline-block;3  padding: 8px 16px;4  margin-top: 8px;5}

klimzaal.example

Try it yourself

Make the notice disappear completely, and turn the menu links into little buttons: inline-block, with 8px 12px of padding.

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