Какво е боксовата модел, от какво се състои и какви…

CSS Box Model (Кутовият модел) е абстрактна същност, която описва как HTML елементите се представят на страницата под формата на правоъгълни блокове. Тя определя размерите и разположението на съдържанието, вътрешните отстояния, границите и външните отстояния на елемента.

Кутовият модел се състои от следните части:

Съдържание: Съдържанието на елемента (текст, изображения и др.). Размерът му се определя от свойствата width и height.
Padding (вътрешно отстояние): Пространството между съдържанието на елемента и неговата граница. Определя се със свойствата padding-top, padding-right, padding-bottom, padding-left или с краткото свойство padding.
Граница (Border): Границата около вътрешното отстояние и съдържанието. Определя се със свойствата border-width, border-style, border-color или с краткото свойство border.
Външно отстояние (Margin): Пространството между границата на елемента и външните елементи. Определя се със свойствата margin-top, margin-right, margin-bottom, margin-left или с краткото свойство margin.

Има два основни вида кутов модел, определяни от свойството box-sizing:

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

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Добавя 20px към общия размер във всяка посока */
  border: 2px solid black; /* Добавя 4px към общия размер във всяка посока */
  box-sizing: content-box; /* Стандартно поведение */
}
/* Общият размер на елемента ще бъде 124px по 124px */

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

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Включено в общата ширина/височина */
  border: 2px solid black; /* Включено в общата ширина/височина */
  box-sizing: border-box;
}
/* Общият размер на елемента ще бъде 100px по 100px */

По-често се използва border-box, тъй като осигурява по-предсказуемо поведение на размерите при добавяне на padding и border. Това е полезно, например, при създаване на отзивчиви оформления, където елементите трябва да заемат определена процентна ширина.

Какво е боксовата модел, от какво се състои и какви видове съществуват?