CSS Блочна модель
Усі елементи HTML можна розглядати як блоки (коробки).
CSS Блочна модель
Всі елементи HTML можна розглядати як блоки. В CSS термін "блочна модель" використовується, коли говорять про дизайн і верстку.
Модель CSS блоку - це, по суті, блок, який охоплює кожен HTML елемент. Він складається із полів (margin), меж (border), відступів (padding) та фактичного змісту (контенту). Зображення нижче ілюструє блочну модель:
Пояснення різних частин:
- Content - Зміст поля, в якому розміщуються текст та зображення
- Padding - Очищує область навколо змісту. Padding прозорий
- Border - Межа, яка охоплює відступи та зміст
- Margin - Очищує область поза межею. Margin прозорий
Блочна модель дозволяє нам додавати межі навколо елементів і визначати відстань між елементами.
Приклад
Демонстрація блочної моделі:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Спробуйте самі »
Ширина і висота елемента
Щоб правильно встановити ширину і висоту елемента в усіх браузерах, вам необхідно знати, як працює блочна модель.
Важливо: Коли ви встановлюєте властивості ширини (width) і висоти (height) елементу за допомогою CSS, ви просто встановлюєте ширину і висоту області змісту. Щоб розрахувати весь розмір елементу, ви також маєте додати відступ (padding), межі (border) та поля (margin).
Приклад
Це <div> елемент буде мати загальну ширину 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Спробуйте самі »
Ось розрахунок:
Загальна ширина елемента має бути розрахована наступним чином:
Загальна ширина елемента = width + лівий padding + правий padding + лівий border + правий border + лівий margin + правий margin
Загальна висота елемента має бути розрахована наступним чином:
Загальна висота елемента = height + верхній padding + нижній padding + верхній border + нижній border + верхній margin + нижній margin
