Какво е моделът на кутията в CSS?

В CSS моделот на кутијата опишува правоаголна област која се генерира за секој елемент и се користи за пресметување на неговите димензии и положба. Се состои од четири делови:

• Кутија со содржина: Областта каде што се прикажува содржината на елементот (текст, слики итн.). Неговата големина се одредува со својствата width и height.
• Падинг кутија: Просторот меѓу границата на содржината и границата на елементот. Големината се одредува со својството padding. Бојата на позадината и сликата на елементот се шират на оваа област.
• Граница на кутијата: Границата на елементот што ја опкружува падинг кутијата. Големината се одредува со својствата border.
• Маргинска кутија: Просторот околу границата на елементот, кој го одделува од други елементи. Големината се одредува со својството margin. Оваа област е секогаш целосно транспарентна.

Стандардната големина на елементот се пресметува на следниов начин:

ширина = width + padding-left + padding-right + border-left-width + border-right-width
висина = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Својството box-sizing овозможува да се промени овој модел:

• content-box (стандардно): Големините width и height се однесуваат само на содржинската кутија.
• border-box: Големините width и height ги вклучуваат padding и border.

.element-default {
  width: 100px; /* Ширина на содржинската кутија = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Фактичката ширина на елементот: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Фактичката ширина на елементот = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Ширина на содржинската кутија: 100 - 10 - 10 - 5 - 5 = 70px */
}