У HTML-документі кожному елементу відповідає прямокутна область (бокс або блок). Рендеринг-движок браузера визначає розміри і положення цих блоків на сторінці, а також їх властивості (наприклад, колір чи фонове зображення) для того, щоб правильно відобразити їх на екрані.

* {
  border: 1px solid red !important;
}

Боксова модель (Box model)

У CSS існує спеціальна боксова модель (також відома як блокова або блочна модель, англ. Box model), яка описує, з чого складається бокс і які властивості впливають на його розміри. Кожен бокс містить чотири області:

• margin (зовнішні відступи),
• border (рамка),
• padding (внутрішні відступи),
• content (контент або вміст).

Область вмісту елемента (content area)

Область вмісту містить текст та інші елементи, що розташовані всередині (контент або вміст). Зазвичай вона має фон, колір або зображення (в такому порядку: фоновий колір покривається непрозорим зображенням) і знаходиться всередині межі контенту (content edge). Її розміри називають шириною контенту (content width або content-box width) та висотою контенту (content height або content-box height). Іноді також використовують терміни «внутрішня ширина/висота елемента».

Поля елемента (padding area)

Поля елемента – це порожня область, що оточує контент. Вона може бути залита певним кольором або покрита фоновим зображенням, а її межі називаються краєм поля (padding edge). Якщо значення padding дорівнює 0, то край поля збігається з межею контенту.

Область рамки (border area)

Область рамки оточує поля елемента, а її межа називається краєм рамки (border edge). Ширина рамки задається окремою властивістю border-width або входить до складу властивості border. Розміри елемента з урахуванням полів та рамки іноді називають зовнішньою шириною/висотою елемента.

Відступи (margin area)

Відступи додають порожній простір навколо елемента та визначають відстань до сусідніх елементів.

<aside> ⚠️

У багатьох браузерах для певних елементів, таких як списки, абзаци та заголовки, за замовчуванням встановлені розміри полів і відступів. Це необхідно для забезпечення однорідного вигляду текстового контенту сторінки без додаткового оформлення.

</aside>

Розміри вмісту (Content Size)

Будь-який блоковий елемент має визначену ширину та висоту вмісту, які можна задати за допомогою CSS. Наприклад:

div {
  width: 200px;
  height: 200px;
}

Також можна обмежити максимальну або мінімальну ширину та висоту за допомогою властивостей min-width, max-width, min-height та max-height:

div {
  max-width: 100px;
  min-width: 10px;
}