HTML-верстка: инструменты и приемы профессиональной front-end разработки

Боксовая модель CSS


назад вперед

Боксовая модель

Каждый HTML элемент можно рассматривать как прямоугольный ящик (коробку). В CSS упоминают термин "боксовая модель", когда речь идет о дизайне и разметке веб-страниц.

Боксовая модель CSS — это прямоугольник, окружающий html элемент и состоящий из следующих элементов: margin, border, 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:

Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

Посмотреть



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта