Модель CSS Box
Все элементы HTML можно рассматривать как поля.
Модель Коробки CSS
В CSS термин "модель коробки" используется, когда речь идет о дизайне и макете.
Модель коробки CSS, по сути, представляет собой коробку, которая обертывает каждый элемент HTML. Он состоит из: содержимого, отступов, границ и полей. Изображение ниже иллюстрирует модель коробки:
- Содержание - Содержимое поля, где появляется текст и изображения
- Набивка - Очищает область вокруг содержимого. Прокладка прозрачная
- Граница - граница, которая проходит вокруг дополнения и содержимого
- Поля - Очищает территорию за пределами границы. Маржа прозрачна
Модель коробки позволяет нам добавить границу вокруг элементов и определить пространство между элементами.
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Ширина и высота элемента
Чтобы правильно установить ширину и высоту элемента во всех браузерах, вам нужно знать, как работает модель коробки.
Важно: Когда вы устанавливаете свойства ширины и высоты элемента с помощью CSS, вы просто устанавливаете ширину и высоту области содержимого. Чтобы рассчитать общую ширину и высоту элемента, вы также должны включить заполнение и границы.
Пример
Этот элемент <div> будет иметь общую ширину 350 пикселей и общую высоту 80 пикселей:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
320px (ширина области содержимого)
+ 20px (левое дополнение + правое дополнение)
+ 10px (левая граница + правая граница)
= 350px (общая ширина)
50 пикселей (высота области содержимого)
+ 20px (верхнее дополнение + нижнее дополнение)
+ 10px (верхняя граница + нижняя граница)
= 80px (общая высота)
Общая ширина элемента должна быть рассчитана следующим образом:
Общая ширина элемента = ширина + левое дополнение + правое дополнение + левая граница + правая граница
Общая высота элемента должна быть рассчитана следующим образом:
Общая высота элемента = высота + верхнее дополнение + нижнее дополнение + верхняя граница + нижняя граница
Примечание: Свойство поля также влияет на общее пространство, которое поле займет на странице, но поле не включено в фактический размер поля. Общая ширина и высота коробки останавливаются на границе.