Summary  
This chapter covers the CSS box-sizing property, explaining how the content-box and border-box values (and the inherit option) change the way an element’s width and height are calculated by including or excluding padding and borders.

General domain of usage  
Web page layout and styling

De eigenschap `box-sizing` wordt gebruikt om te bepalen hoe de totale grootte van een element wordt berekend, met name met betrekking tot de `width` en `height`. Er zijn drie mogelijke waarden voor de eigenschap `box-sizing`. Hieronder volgt een uitleg van wat elk van deze waarden betekent:
```css
box-sizing: content-box | border-box | inherit;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJ3cmFwcGVyIj4KICAgICAgPGRpdiBjbGFzcz0iY2FyZCBjb250ZW50LWJveCI+CiAgICAgICAgPGgzPmNvbnRlbnQtYm94PC9oMz4KICAgICAgICA8cD4KICAgICAgICAgIFRoZSBwYWRkaW5nIGFuZCBib3JkZXIgYXJlIGFkZGVkIG9uIHRvcCBvZiB0aGUgd2lkdGggYW5kIGhlaWdodC4gU28KICAgICAgICAgIHRoZSB0b3RhbCBzaXplIGJlY29tZXMgbGFyZ2VyIHRoYW4gMjAwcHguCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQgYm9yZGVyLWJveCI+CiAgICAgICAgPGgzPmJvcmRlci1ib3g8L2gzPgogICAgICAgIDxwPgogICAgICAgICAgVGhlIHBhZGRpbmcgYW5kIGJvcmRlciBhcmUgaW5jbHVkZWQgaW4gdGhlIDIwMHB4IHdpZHRoIGFuZCBoZWlnaHQuIFRoZQogICAgICAgICAgYm94IHN0YXlzIGV4YWN0bHkgMjAwcHguCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogQ3VycmVudCBmb2N1cyAqLwovKiBEZWZhdWx0IGJlaGF2aW9yICovCi5jb250ZW50LWJveCB7CiAgYm94LXNpemluZzogY29udGVudC1ib3g7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UxZjVmZTsKfQoKLyogUmVjb21tZW5kZWQgbW9kZXJuIGJlaGF2aW9yICovCi5ib3JkZXItYm94IHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmYzZTA7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwoud3JhcHBlciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBnYXA6IDQwcHg7CiAgcGFkZGluZzogMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY4OwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi5jYXJkIHsKICB3aWR0aDogMjAwcHg7CiAgaGVpZ2h0OiAyMDBweDsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogNHB4IHNvbGlkICM0YTkwZTI7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICBmb250LWZhbWlseTogJ0ZpcmEgU2FucycsIHNhbnMtc2VyaWY7CiAgYm94LXNoYWRvdzogMCA0cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxNXB4OwogIGxpbmUtaGVpZ2h0OiAxLjU7CiAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTsKfQoKaDMgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBtYXJnaW4tdG9wOiAwOwogIGZvbnQtc2l6ZTogMjBweDsKICBmb250LXdlaWdodDogNjAwOwogIGNvbG9yOiAjMzMzOwp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      /* Default behavior */
      .content-box {
        box-sizing: content-box;
        background-color: #e1f5fe;
      }

      /* Recommended modern behavior */
      .border-box {
        box-sizing: border-box;
        background-color: #fff3e0;
      }

      /* Additional styles for better appearance (not the current focus) */
      .wrapper {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 10px;
        background-color: #f4f4f8;
        box-sizing: border-box;
      }

      .card {
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 4px solid #4a90e2;
        border-radius: 12px;
        font-family: 'Fira Sans', sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-size: 15px;
        line-height: 1.5;
        transition: all 0.3s ease;
      }

      h3 {
  text-align: center;
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="card content-box">
        <h3>content-box</h3>
        <p>
          De padding en de rand worden bovenop de breedte en hoogte opgeteld. Hierdoor wordt de totale grootte groter dan 200px.
        </p>
      </div>

      <div class="card border-box">
        <h3>border-box</h3>
        <p>
          De padding en de rand zijn inbegrepen in de breedte en hoogte van 200px. De box blijft precies 200px.
        </p>
      </div>
    </div>
  </body>
</html>


## inherit
- De waarde `inherit` zorgt ervoor dat de eigenschap `box-sizing` van een element de waarde van het bovenliggende element overneemt;
- Dit betekent dat het gedrag van `box-sizing` van het huidige element wordt bepaald door de `box-sizing`-eigenschap van het bovenliggende element;
- Dit kan helpen om een consistent `box-sizing`-gedrag in een document te waarborgen door het in te stellen op een bovenliggende container.

Wat is de standaardwaarde voor de eigenschap `box-sizing`?

Als een bovenliggend element `box-sizing: border-box` heeft en een kindelement `box-sizing: inherit`, welke waarde zal het kindelement dan gebruiken voor de eigenschap `box-sizing`?

Beheers de basisprincipes van CSS (Cascading Style Sheets), de opmaaktaal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren. Ideaal voor beginners die een solide basis in CSS willen leggen.

Leer wat CSS is, hoe het te koppelen aan HTML en hoe HTML-elementen te stijlen met behulp van selectors. Verken fundamentele concepten zoals tekstkleuren, pseudo-klassen voor gebruikersacties en variabelen in CSS.

Ontdek hoe u tekst op uw webpagina's kunt opmaken en formatteren. Leer aangepaste lettertypen toepassen en verken diverse lettertype-eigenschappen om het uiterlijk van tekst te verbeteren.

Leer de basisprincipes van het boxmodel, dat de lay-out en de afstand van elementen op een webpagina bepaalt. Verken concepten zoals box-sizing, het toevoegen van ruimte aan elementen, werken met block-level en inline-elementen, en het toepassen van structurele en functionele pseudoklassen voor geavanceerde opmaak.

Ontdek Flexbox, een krachtig CSS-layoutmechanisme voor het rangschikken van elementen in rijen en kolommen. Leer hoe u de richting, uitlijning en afstand van elementen horizontaal en verticaal beheert, evenals het aanpassen van individuele flex-items voor nauwkeurige lay-outs.

Leer hoe u de visuele aantrekkingskracht van uw webpagina's kunt vergroten met CSS. Ontdek technieken voor het toepassen van achtergrondkleuren en -afbeeldingen, het stylen van afbeeldingen, het gebruik van decoratieve pseudo-elementen en het toevoegen van schaduwen om indrukwekkende ontwerpen te creëren.

Begrip van Box-Sizing in CSS

Uitvoer

inherit

1. Wat is de standaardwaarde voor de eigenschap `box-sizing`?

2. Als een bovenliggend element `box-sizing: border-box` heeft en een kindelement `box-sizing: inherit`, welke waarde zal het kindelement dan gebruiken voor de eigenschap `box-sizing`?

Awesome!

Begrip van Box-Sizing in CSS

Uitvoer

inherit

1. Wat is de standaardwaarde voor de eigenschap `box-sizing`?

2. Als een bovenliggend element `box-sizing: border-box` heeft en een kindelement `box-sizing: inherit`, welke waarde zal het kindelement dan gebruiken voor de eigenschap `box-sizing`?

Begrip van Box-Sizing in CSS

Uitvoer

inherit

1. Wat is de standaardwaarde voor de eigenschap box-sizing?

2. Als een bovenliggend element box-sizing: border-box heeft en een kindelement box-sizing: inherit, welke waarde zal het kindelement dan gebruiken voor de eigenschap box-sizing?

Awesome!

Begrip van Box-Sizing in CSS

Uitvoer

inherit

1. Wat is de standaardwaarde voor de eigenschap box-sizing?

2. Als een bovenliggend element box-sizing: border-box heeft en een kindelement box-sizing: inherit, welke waarde zal het kindelement dan gebruiken voor de eigenschap box-sizing?

1. Wat is de standaardwaarde voor de eigenschap `box-sizing`?

2. Als een bovenliggend element `box-sizing: border-box` heeft en een kindelement `box-sizing: inherit`, welke waarde zal het kindelement dan gebruiken voor de eigenschap `box-sizing`?

1. Wat is de standaardwaarde voor de eigenschap `box-sizing`?

2. Als een bovenliggend element `box-sizing: border-box` heeft en een kindelement `box-sizing: inherit`, welke waarde zal het kindelement dan gebruiken voor de eigenschap `box-sizing`?