Opgave

Undersøg de praktiske forskelle mellem værdierne content-box og border-box for egenskaben box-sizing. Din opgave er som følger:

• Anvend værdien content-box til egenskaben box-sizing for elementet med id'et content-box.
• Anvend værdien border-box til egenskaben box-sizing for elementet med id'et border-box.

• box-sizing: content-box: Bredde og højde ekskluderer polstring og kant.
• box-sizing: border-box: Bredde og højde inkluderer polstring og kant.

Forklaring

I dette eksempel har vi to div-elementer, som hver bruger en forskellig værdi for box-sizing-egenskaben:

• Den første div har en rød kant og anvender standardværdien content-box for box-sizing. Selvom width og height er sat til 200px, bidrager både padding og border med ekstra plads, hvilket resulterer i dimensioner, der er større end 200px i begge retninger;
• Omvendt har den anden div en blå kant og vælger border-box som værdi for box-sizing. Her forbliver width og height på 200px, og både padding og border er inkluderet i boksens dimensioner.

Vi kan observere de kontrasterende størrelser på de to bokse, hvor den første er større på grund af den ekstra plads fra padding og border. Til sammenligning bevarer den anden boks en ensartet størrelse på 200px, inklusive padding og border.