为什么按钮内的元素框内有下边距而不是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;
}

导致（请注意＆＃34; PORTFOLIO＆＃34;部分上方的空白区域，但不在底部按钮下方）：

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

Answer 1

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

在p。的情况下，您是保证金崩溃的受害者 看这个例子。外部元素具有黄色背景，您可能希望在p（上方和下方）后面看到它，但它会继承＆＃34;这个边缘，你所看到的是身体的白色背景。

＆＃13;

＆＃13;

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

＆＃13;

display:inline-block

＆＃13;

＆＃13;

＆＃13;

但是，示例中的按钮不是块元素。它默认为.outer { background: yellow; } .inner { background: lime; margin: 2em 0; }，因此不会发生边距折叠，并且外部div的背景在其周围可见。

＆＃13;

＆＃13;

<div class="outer">
  <button class="inner">inline-block in a block</button>
</div>

＆＃13;

<div class="cp_widget_content" id="portfolio_content_area">

<b class="cp_widget_title" id="portfolio_title_area">'.get_the_title().'</b>';

<div id="title_hover">Test</div>

＆＃13;

＆＃13;

＆＃13;

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