Вы здесь

Отступы и поля

Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры - поля и отступы. CSS предоставляет полный контроль над этими параметрами. Для того чтобы устанавливать размер отступа одного HTML элемента от другого, в CSS существуют свойство margin и свойство padding. Margin – это промежуток снаружи элемента, а padding – внутри.

Измените код CSS для тега <h2> следующим образом:

h2 {
   font-size: 1.5em;
   background-color: #ccc;
   margin: 1em;
   padding: 3em;
}

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

Кроме этого для каждой из четырех сторон элемента можно задать свои отступы и поля. Для этого существуют соответствующие свойства – margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left.

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

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

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

От вас вовсе не требуется использовать все части блоковой модели, но стоит помнить, что эта модель применяется абсолютно ко всем HTML элементам веб-страницы, и это очень мощная вещь.