css - 为什么底部边距在按钮的元素框内而不是 p 元素？

Question

为什么为 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;
}

结果(注意“PORTFOLIO”部分上方的空白区域，但不在底部按钮下方):

要查看我的其余代码，请查看 CodePen .

Answer 1

我似乎找不到任何合适的问题来将其作为副本来关闭，所以这里有一个答案。

在 p 的情况下，你是 margin 崩溃的受害者。
请参阅此示例。外部元素有黄色背景，你会希望在 p 后面看到它(上方和下方)，但它“继承”了 p 的边距，所以你看到的是主体的白色背景。

.outer {
  background: yellow;
}

.inner {
  background: lime;
  margin: 2em 0;
}

<div class="outer">
  <p class="inner">two block elements</p>
</div>

但是，您示例中的按钮不是 block 元素。默认情况下，它具有 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>

有关详细信息，请参阅 Mastering margin collapsing在 MDN 上。