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