CSS Бокс модель
CSS модели блоков
Все HTML элементы могут рассматриваться как блоки. Термин в CSS "бокс модель" используется, когда речь идет о дизайне и верстке.
Блочная модель CSS - по сути коробка, которая обертывает каждый элемент HTML. Она состоит из: полей, границ, отступов и контента. На рисунке ниже показана модель коробки:
Объяснение различных частей:
- Контент - Содержимое коробки, где появляются текст и изображения
- Отступы - Очищает область вокруг содержимого. Отступы прозрачные
- Границы - Граница, которая идет вокруг отступа и содержания
- Поля - Очищает область за пределами коробки. Поля прозрачные
Блочная модель позволяет добавить границу вокруг элементов, и определить расстояние между элементами.
Пример
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Попробуйте сами »
Ширина и высота элемента
Для того, чтобы установить ширину и высоту элемента правильно во всех браузерах, вам нужно знать, как работает блочная модель.
Важно знать: Если установить элементы width и height с помощью CSS,
Вы просто зададите ширину и высоту области содержимого. Чтобы вычислить полный размер элемента, вы должны также добавить отступы, границы и поля.
Предположим, что мы хотим установить стиль элемента <div> общую ширину 350 пикселей:
Вот вычисление:
Общая ширина элемента должна быть рассчитана так:
Общая ширина: элемента = ширина + левый отступ + правый отступ + левая граница + правая граница + левое поля + правое поля
Общая высота элемента должна быть рассчитана так:
Общий высота: = высота + отступ сверху + нижний отступ + верхняя граница + нижняя граница + верхняя граница + нижнее поле
Примечание для старых IE: Интернет Explorer 8 и более ранние версии,
подключить свойства padding и border в ширину.
Чтобы устранить эту проблему, обязательно добавьте <!DOCTYPE html> на странице HTML.