Бокс Модель

HTML-елементи відображаються на веб-сторінці у вигляді прямокутних блоків. Кожен елемент має свою область вмісту, відступи, межі та поля.

• Вміст (content) - це простір, де знаходиться власне вміст елемента. Ширина залежить від типу елемента (блочний (block-level) або інлайн (inline) - різницю між ними і специфіку роботи з ними ми розглянемо далі в курсі). Його висота залежить від самого контенту.
• Внутрішній відступ - падінг (padding) - це область між вмістом і рамкою, яку можна використовувати для додавання простору між вмістом і рамкою.
• Рамка (border) оточує елемент. За замовчуванням ширина рамки дорівнює 0. Також, якщо ми не вкажемо колір рамки, то рамка прийме колір вмісту.
• Зовнішній відступ - марджин (margin) - це простір між рамкою та іншими елементами на сторінці.

Примітка

За замовчуванням деякі елементи мають наперед визначені властивості padding та margin. Це зроблено для того, щоб сторінка була читабельною навіть без використання стилів.

Властивості width та height

Властивості width і height використовуються для визначення розміру елемента. Ширина і висота елемента можуть змінюватися залежно від типу бокс моделі.

Важливо також зазначити, що для більшості елементів часто достатньо мати лише властивість width, оскільки height буде визначено автоматично. Це допомагає уникнути проблем переповнення, коли width або height вмісту менше, ніж вміст всередині.