По умолчанию при просмотре страницы между любыми заголовками и абзацами образуется пустое пространство, возникающее из-за того, что браузеры добавляют отступы для каждого из этих элементов. На рис. 2.14 отображен заголовок с отступом по умолчанию. Его можно убрать средствами CSS.

Рис. 2.14. Пустое пространство между заголовком и абзацем, возникающее по умолчанию

 
Решение
Избежать возникновения пустого пространства возможно, убрав отступ снизу для заголовка и отступ сверху для абзаца. В современных браузерах, включая Internet Explorer 7 и выше, это достигается с помощью смежного селектора в CSS. Однако для отображения аналогичного эффекта при просмотре страницы в более старых браузерах придется прибегнуть к другим приемам с лучше реализованной поддержкой.

Использование смежного селектора
Смежный селектор позволяет применять стили к элементу, следующему за другим элементом, если оба они являются дочерними по отношению к одному и тому же родительскому элементу. На самом деле с его помощью можно указать также элемент, следующий не за одним, а за несколькими другими элементами; элемент, к которому применяется стиль, называется последним элементом в цепочке. Если вышесказанное привело вас в замешательство, поверьте, что все сразу станет ясно, как только мы рассмотрим практические примеры.

Следующее правило стиля убирает верхний отступ для любого абзаца, следующего непосредственно за заголовком первого уровня. Обратите внимание, что отступ удаляется для абзаца, следующего за h1, а не для
самого заголовка:

h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: 0;
}
h1+p {
margin-top: 0;
}

На рис. 2.15 показано, как будет отображаться страница после применения данного правила.

Рис. 2.15. Использование смежного селектора для изменения стиля отображения заголовка

 
Как видите, первый следующий за элементом h1 абзац отображается без отступа сверху; при этом все последующие абзацы отображаются с отступами.

Как уже было сказано выше, только самые современные версии браузеров поддерживают смежные селекторы – к примеру, в Internet Explorer их поддержка реализована только начиная с 7-й версии. В определенных случаях вполне можно допустить, что пользователи более старых версий будут видеть зазор между заголовком и текстом. Если же вы твердо намерены убрать отступы, отображаемые в старых браузерах, в вашем распоряжении несколько возможностей.

Можно воспользоваться селекторами классов, как в разделе «Использование на одной странице различных стилей ссылок», присвоив свойству margin для каждого элемента класса нулевое значение. Если вы прочли указанный раздел, то использование такого метода не представит никаких сложностей. Кроме того, заголовку можно задать отрицательный отступ. Этот метод далее мы рассмотрим более подробно.

h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: -0.6em;
}