Mis on kastimudel, millest see koosneb ja millised on…

Kasti mudel (CSS Box Model) on abstraktne mõiste, mis kirjeldab, kuidas HTML elemendid kuvatakse lehel kui ristkülikukujulised plokid. See määrab sisu, sisemiste vahede, piiride ja välimiste vahede suurused ja paigutuse.

Kasti mudel koosneb järgmistest osadest:

Content: elemendi sisu (tekst, pildid jne). Selle suurus määratakse width ja height omadustega.
Padding: ruum elemendi sisu ja selle piiri vahel. Määratakse padding-top, padding-right, padding-bottom, padding-left või lühivormiga padding.
Border: piir elementide sisemise vahe ja sisu ümber. Määratakse border-width, border-style, border-color või lühivormiga border.
Margin: ruum elemendi piiri ja väliste elementide vahel. Määratakse margin-top, margin-right, margin-bottom, margin-left või lühivormiga margin.

On kaks peamist kasti mudeli tüüpi, mis määratakse box-sizing omadusega:

content-box (vaikimisi väärtus): elemendi laius ja kõrgus, mis on määratud width ja height, kehtivad ainult sisule. Padding ja Border liidetakse nende suurustele, suurendades üldist suurust.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Lisab kokku 20px iga telje kohta */
  border: 2px solid black; /* Lisab kokku 4px iga telje kohta */
  box-sizing: content-box; /* Vaikimisi käitumine */
}
/* Elemendi üldmõõt on 124px x 124px */

border-box: elemendi laius ja kõrgus, mis on määratud width ja height, hõlmab sisu, padding ja border. Padding ja Border ei suurenda üldist suurust, vaid "suurendavad" sisu ala.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Arvestatakse üldlaiuses/üldkõrguses */
  border: 2px solid black; /* Arvestatakse üldlaiuses/üldkõrguses */
  box-sizing: border-box;
}
/* Elemendi üldmõõt on 100px x 100px */

Sagedamini kasutatakse border-box, kuna see võimaldab prognoositavamat suuruse käitumist, kui lisatakse padding ja border. See on mugav näiteks reageerivates paigutustes, kus elemendid peavad hõivama teatud protsendilise laiuse.

Mis on kastimudel, millest see koosneb ja millised on selle tüübid?