Taak

Onderzoek de praktische verschillen tussen de waarden content-box en border-box voor de eigenschap box-sizing. Je taak is als volgt:

• Pas de waarde content-box toe op de eigenschap box-sizing voor het element met de id content-box.
• Pas de waarde border-box toe op de eigenschap box-sizing voor het element met de id border-box.

• box-sizing: content-box: Breedte en hoogte exclusief opvulling en rand.
• box-sizing: border-box: Breedte en hoogte inclusief opvulling en rand.

Uitleg

In dit voorbeeld zijn er twee div-elementen, elk met een andere waarde voor de eigenschap box-sizing:

• De eerste div heeft een rode rand en gebruikt de standaardwaarde content-box voor de eigenschap box-sizing. Ondanks dat de width en height op 200px zijn ingesteld, zorgen de padding en border voor extra ruimte, waardoor de afmetingen in beide richtingen groter zijn dan 200px;
• De tweede div heeft een blauwe rand en kiest voor border-box als waarde voor de eigenschap box-sizing. De width en height blijven op 200px, maar de padding en border zijn inbegrepen in de afmetingen van het element.

Het verschil in grootte tussen de twee boxen is zichtbaar: de eerste is groter door de extra ruimte van padding en border, terwijl de tweede box een consistente grootte van 200px behoudt, inclusief padding en border.