Почему нижнее поле внутри поля элемента для кнопки, а не элемента p?
Почему добавление нижнего поля для элемента p добавляет пространство за пределы поля элемента (на которое не влияет цвет фона, установленный в CSS), но верно обратное (поле остается цветным) при добавлении нижнего поля для элемента кнопка? (Я исправил это, используя только заполнение и установив для элемента p значение 0, поэтому я спрашиваю только из любопытства.)
Этот CSS:
.about p {
padding: 0 4em 2em 4em;
margin: 0 0 2em 0;
text-align: left;
}
button {
margin-top: 1em;
margin-bottom: 2em;
}
Результат (обратите внимание на пробел над разделом «ПОРТФОЛИО», но не под кнопкой внизу):
Чтобы просмотреть остальную часть моего кода, просмотрите CodePen.
Ответы 1
Кажется, я не могу найти подходящего вопроса, чтобы закрыть это как дубликат, поэтому вот ответ.
Вы стали жертвой коллапса маржи в случае p.
См. Этот пример. Внешний элемент имеет желтый фон, и вы ожидаете увидеть это позади p (вверху и внизу), но он «наследует» поле p, поэтому вы видите белый фон тела.
.outer {
background: yellow;
}
.inner {
background: lime;
margin: 2em 0;
}<div class = "outer">
<p class = "inner">two block elements</p>
</div>Однако кнопка в вашем примере не является блочным элементом. По умолчанию он имеет display:inline-block, поэтому сворачивание полей не происходит, и вокруг него виден внешний фон div.
.outer {
background: yellow;
}
.inner {
background: lime;
margin: 2em 0;
}<div class = "outer">
<button class = "inner">inline-block in a block</button>
</div>Для получения дополнительной информации см. Освоение схлопывания маржи в MDN.