外边距重叠问题
- 同一层相邻元素之间
<style>
p:nth-child(1){
margin-bottom: 13px;
}
p:nth-child(2){
margin-top: 87px;
}
</style>
<p>下边界范围会...</p>
<p>...会跟这个元素的上边界范围重叠。</p>
发生边界折叠,只会挑最大的边界范围留下。
- 没有内容将父元素和后代元素分开
<style type="text/css">
section {
margin-top: 13px;
margin-bottom: 87px;
}
header {
margin-top: 87px;
}
footer {
margin-bottom: 13px;
}
</style>
<section>
<header>上边界重叠 87</header>
<main></main>
<footer>下边界重叠 87 不能再高了</footer>
</section>
MDN:如果没有边框
border
,内边距padding
,行内内容,也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top
与其内一个或多个后代块级元素的上边界margin-top
;或没有边框,内边距,行内内容,高度height
,最小高度min-height
或 最大高度max-height
来分开一个块级元素的下边界margin-bottom
与其内的一个或多个后代后代块元素的下边界margin-bottom
,则就会出现父块元素和其内后代块元素外边界重叠,重叠部分最终会溢出到父级块元素外面。
- 空的块级元素
<p>up</p>
<div style="margin-top: 20px; margin-bottom: 50px"></div>
<p>bottom</p>
<!--实际上只有50px-->
空的块级元素:当一个块元素上边界
margin-top
直接贴到元素下边界margin-bottom
时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border
、内边距padding
、高度height
、最小高度min-height
、最大高度max-height
、内容设定为inline或是加上clear-fix的时候。