Kas yra dėžutės modelis, iš ko jis susideda ir kokie…

Krepšinio modelis (CSS Box Model) — tai abstrakti sąvoka, apibūdinanti, kaip HTML elementai yra vaizduojami puslapyje kaip stačiakampiai blokai. Ji nustato turinio, vidinių tarpų, ribų ir išorinių tarpų dydį ir išdėstymą.

Krepšinio modelis susideda iš šių dalių:

Content: elemento turinys (tekstas, vaizdai ir kt.). Jo dydis nustatomas width ir height savybėmis.
Padding: erdvė tarp elemento turinio ir jo ribos. Nustatoma padding-top, padding-right, padding-bottom, padding-left arba trumpąja padding savybe.
Border: riba aplink vidinį tarpą ir turinį. Nustatoma border-width, border-style, border-color arba trumpąja border savybe.
Margin: erdvė tarp elemento ribos ir išorinių elementų. Nustatoma margin-top, margin-right, margin-bottom, margin-left arba trumpąja margin savybe.

Yra du pagrindiniai krepšinio modelio tipai, kurie apibrėžiami box-sizing savybe:

content-box (numatytoji reikšmė): elemento plotis ir aukštis, nustatyti width ir height, taikomi tik turiniui. Padding ir Border pridedami prie šių dydžių, padidindami bendrą dydį.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Prideda 20px prie bendro dydžio kiekvienoje ašyje */
  border: 2px solid black; /* Prideda 4px prie bendro dydžio kiekvienoje ašyje */
  box-sizing: content-box; /* Numatytoji elgsena */
}
/* Bendra elemento dydis bus 124px x 124px */

border-box: elemento plotis ir aukštis, nustatyti width ir height, apima turinį, padding ir border. Padding ir Border nepadidina bendro dydžio, o "sumažina" turinio plotą.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Įtraukiama į bendrą plotį/aukštį */
  border: 2px solid black; /* Įtraukiama į bendrą plotį/aukštį */
  box-sizing: border-box;
}
/* Bendra elemento dydis bus 100px x 100px */

Dažniau naudojamas border-box, nes jis leidžia labiau prognozuoti elementų dydį, pridedant padding ir border. Tai patogu, pavyzdžiui, kuriant reaguojančius maketus, kur elementai turi užimti tam tikrą procentinę plotį.

Kas yra dėžutės modelis, iš ko jis susideda ir kokie jo tipai?