Kas yra dėžutės modelis CSS?

CSS dėžutės modelis aprašo, kaip skaičiuojamas vietos, kurią užima elementas interneto puslapyje, dydis. Jis apima:

• Turinys: Sritis tikram elemento turiniui (tekstas, paveikslėliai).
• Padding (įdėklas): Erdvė tarp turinio ir elemento krašto.
• Border (rėmelis): Rėmelis, apimantis paddingą ir turinį.
• Margin (atstumas): Erdvė aplink rėmelį, atskirianti jį nuo kitų elementų.

Standartinis modelis (box-sizing: content-box) nustato elemento dydį kaip turinio, paddingo ir border'o sumą. Margin pridedamas prie bendro užimamų vietos, bet neįtakoja paties elemento dydžio.

box-sizing: border-box savybė keičia elemento dydžio skaičiavimą, įtraukdama paddingą ir border'į į bendrą plotį ir aukštį. Šiuo atveju, elemento dydis nustatomas pagal width/height, o paddingas ir border'is "valgo" vietą turinyje.

/* Standartinis modelis (numatytasis) */
.element-content-box {
  width: 100px; /* Turinio dydis */
  padding: 10px;
  border: 5px solid black;
  /* Bendra plotis: 100px (turinys) + 10px (kairysis padding) + 10px (dešinysis padding) + 5px (kairysis border) + 5px (dešinysis border) = 130px */
}

/* border-box modelis */
.element-border-box {
  width: 100px; /* Bendra plotis: turinys + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Turinys dydis: 100px - 10px (kairysis padding) - 10px (dešinysis padding) - 5px (kairysis border) - 5px (dešinysis border) = 70px */
}

Suprasti dėžutės modelį yra labai svarbu tiksliai pozicionuoti ir sudėti elementus puslapyje.