Установка пустого пространства над и под объектом

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

Свойство "margin-top" определяет отступ над, а "margin-below" - под объектом. Чтобы установить эти свойства для заголовка h2, запишите:

em - это очень полезная единица измерения, поскольку она соотносится с размером шрифта. Один em равен высоте шрифта. Используя em, Вы можете сохранить общий вид Web-страницы независимо от размера шрифта. Это куда более безопасно, чем использование пикселов или точек, которые могут вызвать проблемы у пользователей с большими шрифтами.

В текстовых процессорах обычно используются точки, например, 10pt. К сожалению, один и тот же размер точки по-разному представляется в разных браузерах. То, что в одном браузере выглядит замечательно, в другом может быть совершенно невозможно прочесть! Использование em устраняет эти проблемы.

Чтобы задать отступ над конкретным заголовком, следует создать для этого заголовка именованный стиль. Это делается с помощью атрибута class в разметке, например

Правило стиля записывается в виде:

Правило начинается с имени тега, за которым следует точка, а потом значение атрибута class. Между словами и точкой не должно быть пробелов, иначе правило не будет работать. Есть и другие способы установки стиля для конкретного элемента, но атрибут class - самый гибкий.

Если за заголовком следует абзац текста, значение margin-bottom для заголовка не добавляется к значению margin-top абзаца. Вместо этого используется максимальное из этих двух значений. То же правило действует в отношении margin-top и margin-bottom независимо от того, для каких тегов они указаны.