Kas yra dėžutės modelis CSS?

CSS blokinė modelis apibūdina stačiakampę sritį, kuri generuojama kiekvienam elementui ir naudojama jo dydžių bei padėties apskaičiavimui. Ji susideda iš keturių dalių:

• Content box: Sritis, kurioje rodomas elemento turinys (tekstas, vaizdai ir kt.). Jo dydis nustatomas width ir height savybėmis.
• Padding box: Tarpas tarp turinio ribos ir elemento ribos. Dydis nustatomas padding savybėmis. Elemento foninė spalva ir vaizdas išplečiami į šią sritį.
• Border box: Elemento riba, apimanti padding box. Jo dydis nustatomas border savybėmis.
• Margin box: Tarpas aplink elemento ribą, atskiriantis jį nuo kitų elementų. Dydis nustatomas margin savybėmis. Ši sritis visada yra visiškai permatoma.

Elemento dydis pagal numatytuosius nustatymus apskaičiuojamas taip:

plotis = width + padding-left + padding-right + border-left-width + border-right-width
aukštis = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Savybė box-sizing leidžia pakeisti šį modelį:

• content-box (numatytasis): width ir height matmenys taikomi tik content box.
• border-box: width ir height matmenys apima padding ir border.

.element-default {
  width: 100px; /* Content box plotis = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Faktinis elemento plotis: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Faktinis elemento plotis = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Content box plotis: 100 - 10 - 10 - 5 - 5 = 70px */
}