Усунення відступу між елементом h1 і наступним за ним абзацом
Мал. 2.14. Порожній простір між заголовком і абзацом, що виникає за замовчуванням
Використання суміжного селектора
Суміжний селектор дозволяє застосовувати стилі до елементу, наступного за іншим елементом, якщо обидва вони є дочірніми по відношенню до одного й того ж батьківського елементу. Насправді з його допомогою можна вказати також елемент, наступний нема за одним, а за декількома іншими елементами; елемент, до якого застосовується стиль, називається останнім елементом в ланцюжку. Якщо вищесказане привело вас в замішання, повірте, що все відразу стане ясно, як тільки ми розглянемо практичні приклади.
Наступне правило стилю прибирає верхній відступ для будь-якого абзацу, наступного безпосередньо за заголовком першого рівня. Зверніть увагу, що відступ видаляється для абзацу, наступного за h1, а не для
самого заголовка:
На рис. 2.15 показано, як буде відображатися сторінка після застосування даного правила.
Мал. 2.15. Використання суміжного селектора для зміни стилю відображення заголовка
Як бачите, перший наступний за елементом h1 абзац відображається без відступу зверху; при цьому всі наступні абзаци відображаються з відступами.
Як вже було сказано вище, тільки найсучасніші версії браузерів підтримують суміжні селектори - наприклад, в Internet Explorer їх підтримка реалізована тільки починаючи з 7-ї версії. У певних випадках цілком можна допустити, що користувачі більш старих версій будуть бачити зазор між заголовком і текстом. Якщо ж ви твердо мають намір прибрати відступи, які відображаються в старих браузерах, в вашому розпорядженні кілька можливостей.
Можна скористатися селекторами класів, як в розділі «Використання на одній сторінці різних стилів посилань», присвоївши властивості margin для кожного елемента класу нульове значення. Якщо ви прочитали вказаний розділ, то використання такого методу не представить ніяких складнощів. Крім того, заголовку можна задати негативний відступ. Цей метод далі ми розглянемо більш докладно.
Порада
Застосування негативних відступів. В CSS властивість margin. задає величину зовнішніх відступів, може приймати як позитивні, так і негативні значення. Однак значення властивості padding. забезпечує відступ від кордону батьківського елементу до кордону дочірнього, може бути
тільки позитивним.
Застосування від'ємного значення властивості margin також дозволяє прибрати непотрібний відступ між заголовком і першим абзацом. Наведений нижче код дозволяє досягти такого ж результату, як ми бачили на рис. 2.15: