Taak

Ontdek 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 het id content-box.
• Pas de waarde border-box toe op de eigenschap box-sizing voor het element met het id border-box.

• box-sizing: content-box: Breedte en hoogte sluiten padding en rand uit.
• box-sizing: border-box: Breedte en hoogte omvatten padding en rand.

Uitleg

• De eerste box gebruikt content-box (de standaardinstelling). Breedte en hoogte zijn alleen van toepassing op de inhoud, waardoor padding en border de uiteindelijke grootte vergroten tot meer dan 200×200px;
• De tweede box gebruikt border-box. Breedte en hoogte omvatten inhoud, padding en border, waardoor de totale grootte precies 200×200px blijft.

Hierdoor is de eerste box zichtbaar groter, terwijl de tweede consistent blijft ongeacht toegevoegde padding of border.