CSS Блочная модель
CSS Блочная модель
Все элементы HTML можно рассматривать как блоки. В CSS термин "блочная модель" используется, когда говорят о дизайне и вёрстке.
Модель CSS блока - это, по сути, блок, который охватывает каждый элемент HTML. Он состоит из полей, границ, отступов и фактического содержимого. Изображение ниже иллюстрирует блочную модель:
Объяснение различных частей:
- 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
