Tehtävä

Tarkastellaan käytännön eroja content-box- ja border-box-arvojen välillä box-sizing-ominaisuudessa. Tehtäväsi on seuraava:

• Aseta elementille, jonka id on content-box, box-sizing-ominaisuudeksi content-box.
• Aseta elementille, jonka id on border-box, box-sizing-ominaisuudeksi border-box.

• box-sizing: content-box: Leveys ja korkeus eivät sisällä täytettä (padding) ja reunusta (border).
• box-sizing: border-box: Leveys ja korkeus sisältävät täytteen (padding) ja reunuksen (border).

Selitys

Tässä esimerkissä on kaksi div-elementtiä, joista kummassakin käytetään eri arvoa box-sizing-ominaisuudelle:

• Ensimmäisessä div-elementissä on punainen reunus ja käytössä on oletusarvo content-box box-sizing-ominaisuudelle. Vaikka width ja height on asetettu arvoon 200px, sekä padding että border lisäävät tilaa, jolloin elementin todelliset mitat ylittävät 200px molemmissa suunnissa;
• Toisessa div-elementissä on sininen reunus ja käytössä on border-box box-sizing-ominaisuutena. Tässä tapauksessa width ja height pysyvät arvoissa 200px, ja sekä padding että border sisältyvät laatikon mittoihin.

Voimme havaita laatikoiden koossa selkeän eron: ensimmäinen laatikko on suurempi, koska padding ja border lisäävät tilaa. Toisaalta toinen laatikko säilyttää tasaisen koon 200px, sisältäen sekä padding että border.