考虑一下这个基本的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;
}
()
当padding-top设置为0rem (或者如果
假设您有两个<p>元素,一个堆叠在另一个上,每个元素都有3 3rem的上边和下边距。
通过这种设置,我预计在两个<p>元素之间总共会有6 3rem的空白(3 3rem来自<p>的底部边距,3 3rem来自<p>底部的边距),然而,元素之间只有3 3rem的空白。
为什么边距空间在块元素之间崩溃,而不是每个块元素保持自己的边距空间?
这是。
以上代码页示例的html是:
<p class="outline-red">This is a paragraph with top & bottom margin