CSS Box Model
Модель коробки CSS
Все элементы HTML можно рассматривать как прямоугольники. В CSS, термин "коробка модель" используется, когда речь идет о дизайне и верстке.
Модель коробки CSS по существу коробка которая оборачивает вокруг каждого элемента HTML. Он состоит из: полей, границ, заполнения и фактического содержимого. На рисунке ниже показана модель коробки:
Объяснение различных частей:
- Content - Содержимое поля, в котором отображаются текст и изображения
- Padding - Очищает область вокруг содержимого. Обивка прозрачна
- Border - Граница, которая идет вокруг заполнения и содержимого
- Margin - Очищает область за пределами границы. Маржа прозрачна
Модель Box позволяет нам добавлять границы вокруг элементов и определять пространство между элементами.
Пример
div {
width: 300px;
border: 25px solid
green;
padding: 25px;
margin: 25px;
}
Ширина и высота элемента
Чтобы правильно задать ширину и высоту элемента во всех браузерах, необходимо знать, как работает модель Box.
Важно: При задании свойств Width и Height элемента с помощью CSS необходимо просто задать ширину и высоту области содержимого. Чтобы вычислить полный размер элемента, необходимо также добавить отступы, границы и поля.
Предположим, что необходимо создать стиль элемента <div>, чтобы иметь общую ширину 350 пикселей:
Пример
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Вот расчет:
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin