html - 为什么这么小的填充值会导致这么大的空间？

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

我相信这是由于“margin collapse”。根据 MDN:

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

你的 <p>默认情况下，标记具有顶部和底部边距。边距将折叠并出现在 <div> 之外.但是，如果您将顶部填充添加到 <div> , 然后是 <p>边距不再折叠并出现在 <div> 内部.

你可以去掉 <p>这样的边距:

p {
  margin:0;
}