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

CSS кутовият модел описва как елементите се показват на страницата като правоъгълни блокове. Той се състои от четири зони или слоя, които се припокриват, започвайки с съдържанието:

1. Съдържание: Областта, където се намира реалното съдържание на елемента (текст, изображения и др.). Размерът му се определя от свойствата width и height.

2. Padding (Вътрешен отстъп): Прозрачната област между съдържанието и границата на елемента. Тя се задава със свойствата padding-top, padding-right, padding-bottom, padding-left или с кратката форма padding.

3. Граница (Border): Линията, която обгражда Padding и Съдържание. Стилът, дебелината и цветът й се задават със свойствата border-width, border-style, border-color или чрез съкратени свойства като border.

4. Магн (Margin): Прозрачната област около границата на елемента, която го отделя от други елементи. Тя се задава със свойствата margin-top, margin-right, margin-bottom, margin-left или с кратката форма margin. Марджиновете на съседни блокове могат да се припокриват.

Стандартното поведение, описано с box-sizing: content-box (по подразбиране), определя, че свойствата width и height се отнасят само за съдържанието (Content). Padding и Border се добавят към тази големина, увеличавайки общия размер на елемента.

При използване на box-sizing: border-box, свойствата width и height включват съдържанието, Padding и Border. Margin винаги се добавя към общия размер на елемента, независимо от box-sizing.

Пример:

div {
  width: 100px; /* Ширина на съдържанието (за content-box) или цялостната ширина на елемента (за border-box) */
  height: 50px; /* Височина на съдържанието (за content-box) или цялостната височина на елемента (за border-box) */
  padding: 10px; /* Вътрешен отстъп */
  border: 2px solid black; /* Граница */
  margin: 15px; /* Външен отстъп */
}

В зависимост от стойността на box-sizing, реалните размери на елемента ще бъдат различни.

• box-sizing: content-box: Реалната ширина = 100px (Съдържание) + 10px (Padding ляво) + 10px (Padding дясно) + 2px (Border ляво) + 2px (Border дясно) = 124px. Реалната височина = 50px (Съдържание) + 10px (Padding горе) + 10px (Padding долу) + 2px (Border горе) + 2px (Border долу) = 74px.
• box-sizing: border-box: Реалната ширина = 100px (Съдържание + Padding + Border). Реалната височина = 50px (Съдържание + Padding + Border).

Външният маргин margin: 15px се добавя около тази обща големина.