Модель визуального форматирования

Модель контейнера

В соответствии со спецификацией CSS, свойства width и height устанавливают размер не контейнера, а области содержимого.

По сути, мы имеем дело с ЧЕТЫРЬМЯ(!) контейнерами, где содержимое является так называемым "ядром" (core content area) и помещается еще в 3 контейнера.

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

В разных источниках используются разные термины для описания этих свойств.

padding - внутренний отступ | внутренняя полоска | подложка.
Обрамляет содержимое, отделяя его от границ контейнера. Заливается цветом фона вместе с содержимым.

border - рамка. Имеет цвет, толщину и стиль используемых линий. Чаще используются в декоративных целях.

margin - внешний отступ | внешняя полоска | поле.
Прозрачная полоска за пределами рамки. Используется для задания промежутков между элементами страницы.

Добавление padding, border, margin не изменяет размеры области содержимого, но изменяет общий размер контейнера.

Вычисляем ширину контейнера:

width + 2 *(padding + border + margin) = 100+2*(20+2+30) = 204px

Высота вычисляется аналогично и, в нашем случае, равна ширине.

Свойство box-sizing CSS3

Это свойство появилось в спецификации CSS3 и поддерживается всеми современными браузерами. Позволяет включить отступы контейнера в заданную ширину! Может принимать 2 значения:

box-sizing: content-box - все так как было описано выше, width и height включают в себя только область содержимого.

box-sizing: border-box - указанный размер контейнера включает в себя все отступы и рамки.

Свойства padding и border

Внутренний отступ нужен для того, чтобы содержимое не прижималось к внутренней границе контейнера. В качестве содержимого может быть параграф (текст), рисунок или любой другой элемент.

Рассмотрим пример:
Создаем контейнер div с заданной шириной, внутренним отступом и рамкой. В качестве содержимого вставляем параграф, тоже с рамкой и внутренним отступом. Применяем фон к параграфу, отличный от фона контейнера div, чтобы визуально видеть внутреннюю полоску.

/* класс для контейнера div */
div.my_container{
width: 520px ; /* ширина области содержимого*/
padding: 5px 10px 20px 30px; /* подложка: сверху-справа-снизу-слева */
border: 2px solid #999; /* рамка – толщина сплошная цвет */
background: ##EFF8F8; /* цвет фона*/
}
/* для содержащегося в классе параграфа p */
div.my_container p {
padding: 4px 8px; /* подложка – сверху/снизу-справа/слева */
border: 3px solid #565; /* рамка */
background: #FDFCE5; /* цвет фона */
}

Вывод кода Html

<div class="my_container">
    <p>Так как высота не задана явно ...</p>
</div>

Свойство margin

Как уже говорилось, свойство margin позволяет задать поля вокруг элемента, которые обеспечивают отступ от соседних элементов и границ родительского блока.
Создадим 2 блока одинакового размера, расположенных друг над другом и зададим им разные значения полей:

Слияние внешних отступов

Поля первого блока:
верхнее, нижнее - 30px
правое, левое - 20px

Ширина и высота блока, а так же рамка в данном примере значения не имеют.

Второй блок окружен полями - 50px;
Все достаточно просто, визуально разница в отступе от левого края хорошо заметна. Интерес представляет расстояние между блоками ...

Логично было бы предположить, что расстояние между блоками, нижнее поле одного из которых равно 30px, а верхнее поле другого 50px, будет равно сумме этих полей, т.е. 80px. Но это не так. Смежные вертикальные полоски сливаются, принимая ширину большей из них. В нашем случае зазор между блоками будет 50px. Это очень полезное правило, позволяющее убирать не нужные вертикальные зазоры между абзацами, например.
По горизонтали поля не сливаются.

Сейчас мы более подробно остановимся на этом очень важном для понимания моменте - слияние смежных полей.

<!-- html-код со встроенными стилями -->
 
<div style="margin:15px; width:520px; background:red; color:yellow;">
  <p style="margin:20px; background:blue;">
      Cлияние смежных вертикальных полей родительского и дочернего элементов.
  </p>
</div>

Из вышеприведенного примера видно, что нижнее поле блока div, равное 15px, и верхнее поле блока p - 20px "схлопнулись" и дали результирующее поле размером 20px. При этом горизонтальные поля остались на месте. (в браузере IE6 - нет ...)

А теперь, если родительскому блоку div добавить рамку border:1px solid #111, или внутренний отступ padding:5px, верхнее и нижнее поля вернутся на место!

Вывод: Слияние смежных вертикальных полей дочернего и родительского блоков происходит, если у родителя нет рамки или внутреннего отступа (т.е. ничто не разделяет их внешние поля). Как видите, рамка иногда имеет не только декоративное значение.

Так же сливаются верхние и нижние вертикальные поля пустого элемента, а если пустых элементов несколько и они расположены друг над другом, то все их вертикальные внешние полоски сольются в одну!

Отрицательный margin

Для свойства margin можно задавать отрицательные значения. Их можно использовать для наслоения элементов друг на друга.

Еще отрицательные значения иногда используют для сокрытия элемента. Задав достаточно большой отрицательный отступ, например -2000px, мы смещаем элемент за пределы страницы, т.е. делаем его невидимым.