Каждый HTML элемент можно рассматривать как прямоугольный ящик (коробку). В CSS упоминают термин «боксовая модель», когда речь идет о дизайне и разметке веб-страниц.
Боксовая модель CSS — это прямоугольник, окружающий html элемент и состоящий из следующих элементов: margin, border, padding и контента.
Схематически боксовую модель можно изобразить так:
Элементы боксовой модели:
- Margin — очищает пространство вокруг границы элемента, не позволяя другим элементам приближаться к границе элемента. Можно сказать, что это «личное пространство» элемента. Margin не имеет фонового цвета и прозрачен
- Border — граница (рамка), окружающая padding и контент (содержимое). Цвет границы можно изменить
- Padding — очищает пространство вокруг контента (содержимого). Можно сказать, что это «личное пространство» контента. Padding окрашивается в цвет фона элемента.
- Содержимое — пространство для содержимого, куда помещается текст и/или изображения.
Чтобы правильно задать ширину и высоту элемента, вам надо знать, как рассчитываются размеры элементов в боксовой модели.
Высота и ширина элемента
Внимание: когда вы задаете ширину и высоту элемента с помощью CSS, вы указываете только размеры зоны содержимого. Для вычисления полного размера элемента, вам надо добавить к вашим размерам внутренние/внешние отступы и рамку.
Смотрите, в этом примере общая ширина элемента равна 300px:
width:250px; padding:10px; border:5px solid gray;
margin:10px;
Давайте посчитаем: 250px (width) + 20px (правый и левый padding) + 10px (правая и левая граница) + 20px (правый и левый margin)
= 300px
Представим себе, что у нас есть только 250 px для элемента. Давайте попробуем написать код CSS для такого элемента:
width:220px; padding:10px; border:5px solid gray;
margin:0px;
Общую ширину элемента можно рассчитать так:
Общая ширина элемента = width + левый padding + правый padding + правая граница + левая граница + левый margin + правый margin
Я думаю, для вас не составит труда вывести формулу для расчета общей высоты элемента.
Поддержка в браузерах
Если вы проверяли пример, приведенный выше, в Internet Explorer, вы должны были заметить, что общая ширина элемента была меньше 250px.
IE включает padding и границы в ширину, указанную вами, если не указан DOCTYPE.
Для исправления этой ошибки IE, достаточно добавить в код DOCTYPE:
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }