Mis on kastimudelis CSS-is?

CSS-blokimudel kirjeldab ristkülikukujulist ala, mis genereeritakse iga elemendi jaoks ja mida kasutatakse selle suuruse ja asukoha arvutamiseks. See koosneb neljast osast:

• Content box: Ala, kus kuvatakse elemendi sisu (tekst, pildid jne). Selle suurus määratakse width ja height omadustega.
• Padding box: Ruumi vahe sisu piiri ja elemendi piiri vahel. Selle suurus määratakse padding omadustega. Elemendi taustavärv ja pilt levivad selle ala peale.
• Border box: Elemendi äär, mis ümbritseb padding boxi. Selle suurus määratakse border omadustega.
• Margin box: Ala ümber elemendi piiri, mis eraldab selle teistest elementidest. Selle suurus määratakse margin omadustega. See ala on alati täielikult läbipaistev.

Elemendi suurus arvutatakse vaikimisi järgmiselt:

laius = width + padding-left + padding-right + border-left-width + border-right-width
kõrgus = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Omadus box-sizing võimaldab seda mudelit muuta:

• content-box (vaikimisi): width ja height suurused kehtivad ainult content boxi kohta.
• border-box: width ja height suurused hõlmavad paddingi ja borderi.

.element-default {
  width: 100px; /* Content box laius = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Tõeline elemendi laius: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Tõeline elemendi laius = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Content box laius: 100 - 10 - 10 - 5 - 5 = 70px */
}