Сброс первого и последнего поля в CSS

Question

Я бы хотел, чтобы верхний элемент (неважно, p, img, hx или любой другой) выровнялся с вершиной родительского элемента, сохраняя при этом нормальное разделение между его братьями и сестрами.

Например, у меня есть div, полный p элементов. Каждый элемент p имеет верхнее и нижнее поле, скажем, 10px. Каждый элемент p отделен на 20px (10 от одного выше и 10 от одного ниже). Побочным эффектом этого является то, что первый p толкается вниз на 10px, а нижний p увеличивается на 10px.

Answer 1

Самый простой подход - использовать селектор брата:

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

Это правило применяется только к абзацам , если они идут сразу после другого абзаца. Таким образом, это правило не относится к вашему первому абзацу, так как оно не следует за абзацем.

Если вы хотите пробел между каждым абзацем, но не перед первым и не после последнего, используйте это:

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

Answer 2

Вы также можете использовать псевдоселекторы :first-child и :last-child, если это подходит для браузеров, которые вы поддерживаете.Установите необходимое поле, а затем замените его для определенных элементов.

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

Answer 3

Самый простой способ сделать это - добавить только нижние поля для ваших элементов.Так что в вашем случае каждый элемент p будет иметь нижнее поле в 20px.Это также сохранит интервал в 20 пикселей между вашими элементами p.

Если вы хотите удалить дополнительные 20 пикселей, добавленные к последнему тегу p, то вам нужно добавить отрицательное нижнее поле в контейнер элементов p.

.container {margin-bottom:-20px;}
.container p {margin-bottom:20px;}

Вы также можете сделать это, сохранив отдельные верхние и нижние поля, но это сделает ваш код более сложным:

.container {margin-top:-10px; margin-bottom:-10px;}
.container p {margin-top:10px; margin-bottom:10px;}

Кроме того, это будет работать во всех браузерах, тогда как еслииспользуйте специальные селекторы, ваш CSS не будет применен к IE6 и т. п.