x
 
↑
Февраль
1 •
8 •

2 •

3 •

2 •
↓
Иван Титов
7 февраля 2013

Как правильно задавать и комбинировать верхние и нижние отступы у заголовков и абзацев?

Например, обычно у h2 желателен большой отступ сверху для отделения от предыдущего абзаца. Но когда h2 идёт сразу же после h1, получается слишком большой отступ между ними. Можно ли как-то через ЦСС отследить или предупредить подобные случаи?

Чтобы переопределить стили у заголовка h2, стоящего сразу за h1, используйте селектор смежного элемента:

 
h2 {
  margin-top: 2em;
}
h1 + h2 {
  margin-top: 0;
}

Объект селектора — элемент, для которого сработают правила — в конце «уравнения», здесь это h2.

Правило работает даже в ИЕ 7.

 Спецификация селектора

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии
Ivan Prishvin
8 февраля 2013

Артём, спасибо за полезный совет. Подскажи, а есть уравнение в ЦСС, чтобы правило срабатывало в начале уравнения? В случае с этим советом — правило для h1 перед h2.

9 февраля 2013

Иван, сейчас такой возможности нет. Объект селектора всегда выражен его последней частью. Когда в ЦСС появится произвольное назначение объекта селектора, правило для h1 перед h2 будет таким:

$h1 + h2 { some: value; }

См. http://artgorbunov.ru/bb/soviet/20120419/

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
3 • 2 • 4 • 4 •




Недавно всплыло

Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 • 1 • 1 •