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

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

важность: 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(odd), к нему нужно ещё добавить отсечение первого элемента: li:nth-child(odd):not(:first-child).

Можно поступить и по-другому: li:nth-child(2n+3) выберет все элементы для n=0,1,2..., то есть 3-й, 5-й и далее, те же, что и предыдущий селектор. Немного менее очевидно, зато короче.

Правило

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

Поставим отступ перед каждым нечётным элементом, кроме первого:

li:nth-child(odd):not(:first-child) {
  margin-top: 1.5em;
}

Получится так:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      font: 14px/1.5 Georgia, serif;
    }

    ul {
      margin: 0;
    }

    li:nth-child(odd):not(:first-child) {
      margin-top: 1.5em;
    }
  </style>
</head>

<body>

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

</body>

</html>

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