Как добавить вертикальное расстояние между элементами блока, но не сверху и снизу

Скажем, у меня есть группа элементов P, LI или DIV, между которыми нет ничего. Я хочу контролировать вертикальное расстояние между ними, поэтому они не подходят так плотно. Но я не хочу добавлять верхнюю и нижнюю части пространства, так как это обрабатывается родительским элементом, и мне больше не нужно. Есть ли простой способ сделать это, который работает для всех элементов блока?

Скажем, у меня есть что-то вроде этого:

p {
  margin: 5px 0;
  }

а затем

 <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
 </div>

Но я не хочу 5px выше p 1 или ниже p 4, так как у div уже есть отступы, и я не хочу вникать в это. Я просто хочу 10px между p 1 и p 2, p 2 и p 3 и т.д.

Я уверен, что смогу сделать что-то kludgy (и у меня много раз), но я ищу что-то более чистое, что мне не нужно делать много специальной обложки для этой общей ситуации.

Ответ 1

Использование смежных селекторов

p + p { margin-top: 10px; }

В принципе, понятие состоит в том, что если a p приходит за другим p, то дает промежуток в 10px между ними.

Вы используете что-то похожее на

p + p, li + li, div + div { 
    margin-top: 10px;
}

Ответ 2

Это также можно сделать, используя :last-child или :first-child

Вот пример:

p, li, div {
    margin-bottom: 10px;
}

p:last-child, li:last-child, div:last-child {
    margin-bottom: none;
}

Ответ 3

Вы можете использовать смежный селектор. Вы можете определить следующее:

p + p{
 margin-top:0;
}

ИЛИ

p ~ p{
 margin-top:0;
}

Ответ 4

p, li, div {
    margin-bottom: 10px;
}
#parentID {
    margin-bottom: -10px;
}

Ответ 5

p { margin: 10px 0 0 0; }
p:first-child { margin: 0; }

То есть установите верхнее поле 10px для всех элементов p и других полей в ноль, за исключением первого элемента p, для которого вы установили даже верхнее поле в ноль.

Это работает более широко, чем многие другие подходы, которые используют контекстные селектора, которые не поддерживаются старыми браузерами. Чтобы получить максимальную поддержку браузера, вы должны назначить класс первому элементу p в разметке и использовать селектор классов вместо p:first-child.

Это самый простой способ, так как CSS работает с элементами, а не на том, что между элементами. Поэтому вам нужно каким-то образом выделить первый элемент p в последовательности элементов p.

Обратите внимание, что p { margin: 5px 0; } (упомянутый в вопросе) создаст вертикальные поля 5px, а не 10px, потому что смежные вертикальные поля сжимаются.