Вернуться к уроку

Отступ между элементами, размер одна строка

важность: 4

Есть список UL/LI.

Текст вверху без отступа от списка.
<ul>
  <li>Маша</li>
  <li>Паша</li>
  <li>Даша</li>
  <li>Женя</li>
  <li>Саша</li>
  <li>Гоша</li>
</ul>
Текст внизу без отступа от списка.

Размеры шрифта и строки заданы стилем:

body {
  font: 14px/1.5 Georgia, serif;
}

Сделайте, чтобы между элементами был вертикальный отступ.

  • Размер отступа: ровно 1 строка.
  • Нужно добавить только одно правило CSS с одним псевдоселектором, можно использовать CSS3.
  • Не должно быть лишних отступов сверху и снизу списка.

Результат:

Открыть песочницу для задачи.

Выбор элементов

Для выбора элементов, начиная с первого, можно использовать селектор nth-child.

Его вид: li:nth-child(n+2), т.к. n идёт от нуля, соответственно первым будет второй элемент (n=0), что нам и нужно.

Решение

Отступ, размером в одну строку, при line-height: 1.5 – это 1.5em.

Правило:

li:nth-child(n+2) {
  margin-top: 1.5em;
}

Ещё решение

Ещё один вариант селектора: li + li

li + li {
  margin-top: 1.5em;
}

Открыть решение в песочнице.