Oppgave

Utforsk de praktiske forskjellene mellom verdiene content-box og border-box for egenskapen box-sizing. Oppgaven er som følger:

• Bruk verdien content-box på egenskapen box-sizing for elementet med id content-box.
• Bruk verdien border-box på egenskapen box-sizing for elementet med id border-box.

• box-sizing: content-box: Bredde og høyde ekskluderer padding og border.
• box-sizing: border-box: Bredde og høyde inkluderer padding og border.

Forklaring

I dette eksemplet har vi to div-elementer, som hver bruker en forskjellig verdi for box-sizing-egenskapen:

• Den første div-en har en rød border og bruker standardverdien content-box for box-sizing. Selv om width og height er satt til 200px, legger padding og border til ekstra plass, noe som gir dimensjoner større enn 200px i begge retninger;
• Den andre div-en har en blå border og bruker border-box som verdi for box-sizing. Her forblir width og height på 200px, og padding og border er inkludert i boksens dimensjoner.

Vi kan se de ulike størrelsene på de to boksene, der den første er større på grunn av ekstra plass fra padding og border. Den andre boksen beholder en konstant størrelse på 200px, inkludert padding og border.