HTML en CSS leren: Het boxmodel

Het boxmodel

De kaartjes met de prijzen plakken tegen elkaar, en de tekst plakt tegen de rand van het kaartje. "Waar is de lucht?" vraagt Jolien.

Elk element is een vak

Voor de browser is elk element een vak, opgebouwd uit vier lagen van binnen naar buiten.

De inhoud: de tekst of de afbeelding. De padding: ruimte binnen het vak, tussen de inhoud en de rand; de achtergrond loopt erdoor. De rand (border). En de marge (margin): ruimte buiten de rand, naar de andere vakken, altijd doorzichtig.

Onder de pagina zie je het vak van het eerste kaartje als lagen, met de maten erbij, zoals in de ontwikkelaarstools van je browser.

style.css

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

klimzaal.example

Eén, twee of vier waarden

padding: 16px geeft alle vier de kanten 16px. Met twee waarden is de eerste voor boven en onder, de tweede voor links en rechts: padding: 8px 16px. Met vier waarden ga je met de klok mee: boven, rechts, onder, links. Voor één kant schrijf je padding-top, padding-right, padding-bottom of padding-left. Bij margin werkt het net zo.

Een rand heeft drie dingen nodig: een dikte, een stijl en een kleur, zoals border: 2px solid #2d6a4f. Zonder stijl (solid, dashed, dotted) zie je niets.

En met border-radius maak je de hoeken rond.

style.css

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

klimzaal.example

Probeer het zelf

Geef elk kaartje (.kaart) 16px padding aan alle kanten, een rand van 2px solid #2d6a4f, ronde hoeken van 16px en 24px marge eronder.

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 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Elk element is een vak

Voor de browser is elk element een vak, opgebouwd uit vier lagen van binnen naar buiten.

Onder de pagina zie je het vak van het eerste kaartje als lagen, met de maten erbij, zoals in de ontwikkelaarstools van je browser.

style.css

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

klimzaal.example

Eén, twee of vier waarden

Een rand heeft drie dingen nodig: een dikte, een stijl en een kleur, zoals border: 2px solid #2d6a4f. Zonder stijl (solid, dashed, dotted) zie je niets.

En met border-radius maak je de hoeken rond.

style.css

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

klimzaal.example

Probeer het zelf

Geef elk kaartje (.kaart) 16px padding aan alle kanten, een rand van 2px solid #2d6a4f, ronde hoeken van 16px en 24px marge eronder.

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