HTML en CSS leren: Box-sizing

Box-sizing

Jolien gaf de melding `width: 100%` en wat padding. Nu steekt ze rechts uit de pagina, en op een gsm moet je opzij schuiven om haar te lezen.

Waar de breedte over gaat

Standaard gaat width alleen over de inhoud. De padding en de rand komen er nog bij. width: 100% met 24px padding links en rechts is dus 48px breder dan de ruimte die er is: het vak steekt uit.

Met box-sizing: border-box gaat width over het hele vak, tot en met de rand. De padding gaat dan van de inhoud af, en width: 100% past precies.

Veel sites zetten daarom bovenaan hun CSS * { box-sizing: border-box; }. Het sterretje * kiest elk element.

style.css

1.melding {2  width: 100%;3  padding: 12px 24px;4}

klimzaal.example

Probeer het zelf

Zet bovenaan de regel die elk element border-box geeft. Geef daarna de kaartjes width: 100% en 16px 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 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Waar de breedte over gaat

Met box-sizing: border-box gaat width over het hele vak, tot en met de rand. De padding gaat dan van de inhoud af, en width: 100% past precies.

Veel sites zetten daarom bovenaan hun CSS * { box-sizing: border-box; }. Het sterretje * kiest elk element.

style.css

1.melding {2  width: 100%;3  padding: 12px 24px;4}

klimzaal.example

Probeer het zelf

Zet bovenaan de regel die elk element border-box geeft. Geef daarna de kaartjes width: 100% en 16px 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