HTML en CSS leren: Display

Display

Jolien gaf de knoppen padding, maar ze lopen nu over de tekst erboven. En de links in het menu willen geen breedte krijgen. Het ligt niet aan de padding, maar aan het soort vak.

Blok, inline en daartussen

Met display kies je hoe een vak zich gedraagt. Een block begint op een nieuwe regel en neemt de hele breedte, zoals <p>, <h2>, <div> en <section>.

Een inline-element staat in de regel tussen de woorden, zoals <a>, <span> en <strong>. Een width of height negeert het, en padding en marge boven en onder duwen de regels er niet voor opzij.

inline-block is het beste van beide: het staat in de regel, maar is een echt vak, met een breedte en padding die meetelt. En display: none laat een element helemaal verdwijnen.

style.css

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

klimzaal.example

Probeer het zelf

Laat de melding helemaal verdwijnen, en maak van de links in het menu knopjes: inline-block, met 8px 12px padding.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Klimzaal De Steile Wand</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>De Steile Wand</h1>12      <p class="slogan">Klimzaal in Ieper</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prijzen.html">Prijzen</a>17        <a href="lessen.html">Lessen</a>18      </nav>19    </header>20    <main>21      <p class="melding">Zaterdag 12 april zijn we gesloten voor een wedstrijd.</p>22      <section class="kaarten">23        <article class="kaart">24          <h2>Dagkaart</h2>25          <p class="prijs">€ 14</p>26          <p>Klim de hele dag, zo lang je armen het volhouden.</p>27          <a class="knop" href="kopen.html">Kopen</a>28        </article>29        <article class="kaart">30          <h2>Tienbeurtenkaart</h2>31          <p class="prijs">€ 120</p>32          <p>Tien keer klimmen, een jaar geldig.</p>33          <a class="knop" href="kopen.html">Kopen</a>34        </article>35      </section>36      <section class="nieuws">37        <h2>Nieuws</h2>38        <p>In de boulderzaal hangen twaalf nieuwe routes, van groen tot zwart.</p>39        <p>Elke dinsdag is er een klimles voor beginners. Klimschoenen krijg je van ons.</p>40        <p>Op woensdagnamiddag klimmen de kinderen van de jeugdclub. Kom gerust eens kijken.</p>41      </section>42    </main>43    <footer>44      <p>Grepenstraat 7, 8900 Ieper</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.melding {25  background-color: #ffe8d6;26}27.kaart {28  padding: 0 16px;29  background: #ffffff;30}31.prijs {32  font-size: 1.5rem;33  font-weight: bold;34}35.knop {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.nieuws {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example

Klaar voor meer?

De volledige les heeft 6 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Blok, inline en daartussen

Met display kies je hoe een vak zich gedraagt. Een block begint op een nieuwe regel en neemt de hele breedte, zoals <p>, <h2>, <div> en <section>.

inline-block is het beste van beide: het staat in de regel, maar is een echt vak, met een breedte en padding die meetelt. En display: none laat een element helemaal verdwijnen.

style.css

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

klimzaal.example

Probeer het zelf

Laat de melding helemaal verdwijnen, en maak van de links in het menu knopjes: inline-block, met 8px 12px padding.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Klimzaal De Steile Wand</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>De Steile Wand</h1>12      <p class="slogan">Klimzaal in Ieper</p>13      <nav>14        <a href="index.html">Home</a>15        <a href="routes.html">Routes</a>16        <a href="prijzen.html">Prijzen</a>17        <a href="lessen.html">Lessen</a>18      </nav>19    </header>20    <main>21      <p class="melding">Zaterdag 12 april zijn we gesloten voor een wedstrijd.</p>22      <section class="kaarten">23        <article class="kaart">24          <h2>Dagkaart</h2>25          <p class="prijs">€ 14</p>26          <p>Klim de hele dag, zo lang je armen het volhouden.</p>27          <a class="knop" href="kopen.html">Kopen</a>28        </article>29        <article class="kaart">30          <h2>Tienbeurtenkaart</h2>31          <p class="prijs">€ 120</p>32          <p>Tien keer klimmen, een jaar geldig.</p>33          <a class="knop" href="kopen.html">Kopen</a>34        </article>35      </section>36      <section class="nieuws">37        <h2>Nieuws</h2>38        <p>In de boulderzaal hangen twaalf nieuwe routes, van groen tot zwart.</p>39        <p>Elke dinsdag is er een klimles voor beginners. Klimschoenen krijg je van ons.</p>40        <p>Op woensdagnamiddag klimmen de kinderen van de jeugdclub. Kom gerust eens kijken.</p>41      </section>42    </main>43    <footer>44      <p>Grepenstraat 7, 8900 Ieper</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.melding {25  background-color: #ffe8d6;26}27.kaart {28  padding: 0 16px;29  background: #ffffff;30}31.prijs {32  font-size: 1.5rem;33  font-weight: bold;34}35.knop {36  background-color: #e76f51;37  color: #ffffff;38  text-decoration: none;39}40.nieuws {41  background: #ffffff;42}43footer {44  padding: 12px 16px;45  background: #1b4332;46  color: #ffffff;47}

klimzaal.example