Mis on kasti mudel CSS-is?

Mudeli blokov CSS kirjeldab, kuidas arvutatakse ruum, mida element võtab veebilehel. See hõlmab:

• Sisu (content): Piirkond tegelikule elemendi sisule (tekst, pildid).
• Tihend (padding): Ruum sisu ja elemendi piiri vahel.
• Piir (border): Piir, mis ümbritseb paddingut ja sisu.
• Välimine marginaal (margin): Ruum ümber elemendi piiri, eraldades selle teistest elementidest.

Elemendi suurus vaikimisi (standardses mudelis box-sizing: content-box) määratakse sisu, padding ja piiri suuruste summana. Marginaal lisandub kogu hõivatud ruumile, kuid ei mõjuta enda suurust.

Omadus box-sizing: border-box muudab elemendi suuruse arvutamist, kaasates padding ja piiri üldlaiusesse ja kõrgusesse. Sellisel juhul määratakse elemendi suurus width/height abil, ning padding ja piir "söövad" ruumi sisust.

/* Standardne mudel (vaikimisi) */
.element-content-box {
  width: 100px; /* Sisu suurus */
  padding: 10px;
  border: 5px solid black;
  /* Kogulaius: 100px (sisu) + 10px (padding-left) + 10px (padding-right) + 5px (piir-left) + 5px (piir-right) = 130px */
}

/* border-box mudel */
.element-border-box {
  width: 100px; /* Kogulaius: sisu + padding + piir */
  padding: 10px;
  border: 5px solid black;
  /* Sisu suurus: 100px - 10px (padding-left) - 10px (padding-right) - 5px (piir-left) - 5px (piir-right) = 70px */
}

Blokmudeliga mõistmine on kriitiline elementide täpseks positsioneerimiseks ja paigutamiseks lehel.