为什么这个小的填充值会导致如此大的空间？

Question

考虑这个基本的HTML：

<p>Lorem ipsum dolor sit amet</p>

<div><p>Lorem ipsum dolor sit amet</p></div>

<p>Lorem ipsum dolor sit amet</p>

和CSS：

div {
    background-color: lightgray;
    padding-top: 0rem;
    padding-left: 1rem;
}

（Fiddle here.）

当padding-top设置为0rem时（或省略该行），文本上方几乎没有灰色背景。但是，如果我设置padding-top: 0.1rem，那么突然间文本上方会出现大量灰色背景 - 大约与文本左侧相同。我希望在顶部看到的填充量只有左侧的十分之一。为什么看似奇怪的行为？

Answer 1

我相信这是由于＆＃34; margin collapse＆＃34;。根据MDN：

  

如果没有边框，填充，内联内容或清除   将块的边缘顶部与其第一个边缘顶部分开   子块，或没有边框，填充，内联内容，高度，   min-height或max-height分隔块的边距底部   在最后一个孩子的边缘底部，那些边缘崩溃了。   折叠的保证金最终在父母之外。

默认情况下，您的<p>标记有上下边距。 边距将崩溃并显示在<div>之外。 但是，如果您向<div>添加顶部填充，则<p>边距不会再崩溃并显示在<div>内。

你可以像这样摆脱<p>边距：

p {
  margin:0;
}