Блочная модель CSS
Заговорите о дизайне и макете в CSS, и вскоре прозвучит термин блочная модель.
Она описывает блок, который оборачивает каждый HTML-элемент и состоит из четырёх частей: содержимое, отступ (padding), граница и внешний отступ (margin).
- Содержимое — содержит текст и изображения.
- Отступ (padding) — прозрачная область, освобождённая вокруг содержимого.
- Граница — окружает и отступ, и содержимое.
- Внешний отступ (margin) — прозрачная область, освобождённая за пределами границы.
Благодаря этой модели мы можем добавлять границу вокруг элементов и управлять пространством между ними.
Пример
Каждая часть блока видна на этом div, у которого есть ширина, зелёная граница, отступ и внешний отступ.
<style> задайте <div> ширину 300px, сплошную зелёную границу 15px, отступ 50px и внешний отступ 20px. Добавьте цвет фона, чтобы область содержимого была видна. Поместите внутрь текст.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is a box that wraps around every HTML element. It has content, padding, a border, and a margin.</p>
<div>This text is the content of the box. The padding, border, and margin sit around it.</div>
</body>
</html>
Ширина и высота элемента
Чтобы правильно задать ширину и высоту во всех браузерах, нужно понимать блочную модель.
Важно: Свойства width и height задают размер только области содержимого. Отступы и границы идут сверх этого, поэтому прибавьте их, чтобы узнать общий размер.
Общая ширина = width + отступы слева и справа + граница слева и справа.
Общая высота = height + отступы сверху и снизу + граница сверху и снизу.
Примечание: Размер блока заканчивается на границе. Внешний отступ не является частью этого размера, хотя и добавляется к месту, которое блок занимает на странице.
Пример
Начнём с ширины 320px, отступа 10px и границы 5px: в результате общая ширина составляет 350px, а общая высота — 80px.
<style> задайте <div> ширину 320px, высоту 50px, отступ 10px, сплошную серую границу 5px и margin 0. Общая ширина становится 350px, а общая высота — 80px. Поместите внутрь текст.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<div>The total width is 350px and the total height is 80px.</div>
</body>
</html>