为什么添加边框会改变高度计算？

Question

我有两个div容器,一个带边框,一个没有边框.
在两个容器里面,我得到了一个p带有边距的段落1em.

显然两个容器应该具有相同的高度.
令人惊讶的是,Firefox,Chrome,Safari和IE的情况并非如此.

小提琴演示

CSS:

p { display: block; margin: 1em }    

HTML:

<div>
    <p></p>
</div>

<div style="border: 1px solid black">
    <p></p>
</div>

这种行为的原因是什么？

Answer 1

第一个p元素的边距与其父元素折叠div.这意味着p元素上的边距与您的零边距相结合div,导致它们越过边界div.结果,报告的高度div与其p孩子的高度相同.

在第二组元素中,添加边框时会阻止边距折叠.这会导致父级div完全包含p元素及其边距.因此,高度div变为p元素高度和垂直边距的总和.

请记住,p元素具有默认的垂直边距,并且大多数块元素没有固定的高度(即height: auto默认情况下),因此它们只有适合其内容所需的高度.当孩子的边距与其父母的边距折叠时,在计算父母的身高时不包括这些边距.