Блокова модель (боксова модель, box model)

опис
У HTML-документі кожному елементу на сторінці відповідає прямокутна область (бокс або блок). Движок рендеринга в браузері визначає розміри і положення боксів на сторінці, а також їх властивості на зразок кольору, фонової картинки для того, щоб відобразити їх на екрані.
У мові CSS є спеціальна боксова модель (також блокова модель або блокова модель, англ. Box model), яка описує, з чого складається бокс і які властивості впливають на його розміри. У ній у кожного боксу є 4 області: margin (зовнішні відступи), border (рамка), padding (внутрішні поля), і content (контент або вміст).
Внутрішня область елемента (content area) містить текст та інші елементи, розташовані всередині (контент або вміст). У неї часто буває фон, колір або зображення (в такому порядку: фоновий колір ховається під непрозорим зображенням), і вона знаходиться всередині content edge; її розміри називаються ширина контенту (content width або content-box width), і висота контенту (content height або content-box height). Іноді ще говорять «внутрішня ширина / висота елемента»
За замовчуванням, якщо CSS-властивість box-sizing не задано, розмір внутрішньої області з вмістом задається властивостями width , min-width , max-width , height , min-height and max-height . Якщо ж властивість box-sizing задано, то воно визначає, для якої області вказані розміри.
Поля елемента (padding area) - це порожня область, навколишнє контент. Вона може бути залита якимось кольором, покрита фоновий картинкою, а її межі називаються краю полів (padding edge).
Розміри полів задаються окремо з різних сторін властивостями padding-top , padding-right , padding-bottom , padding-left або загальною властивістю padding .
Область рамки (border area) оточує поля елемента, а її межа називається краю рамки (border edge). Ширина рамки задається окремим властивістю border-width або в складі властивості border . Розміри елемента з урахуванням полів і рамки іноді називають зовнішньої шириною / висотою елемента.
Відступи (margin area) додають порожній простір навколо елемента і визначають відстань до сусідніх елементів.
Величина відступів задається окремо в різних напрямках властивостями margin-top , margin-right , margin-bottom , margin-left або загальною властивістю margin .
Відступи двох сусідніх елементів, розташованих один над одним або вкладених один в одного, можуть накладатися. Це називається схлопування кордонів ( margin collapsing ). Схлопиваются тільки вертикальні відступи.
Для елементів з display : Inline (або inline-block, inline-table) на займане за висотою місце також впливає значення властивості line-height .

Довідник по CSS
Ключові концепції CSS: синтаксис CSS , @ -правила , коментарі , специфічність і успадкування , блокова модель , режими компонування і моделі візуального форматування , схлопування відступів , початкові , обчислені , вирішені , зазначені , використовувані і дійсні значення. Синтаксис визначення значень , скорочені властивості і заміщаються елементи .
Пов'язані властивості: box-sizing , background-clip , height , max-height , min-height , width , max-height , min-height , padding , padding-top , padding-right , padding-bottom , padding-left , border , border-top , border-right , border-bottom , border-left , border-width , border-top-width , border-right-width , border-bottom-width , border-left-width , margin , margin-top , margin-right , margin-bottom , margin-left