- 所属分类:网站建设知识
- 作者: 利来w66(中国)有限公司
- 更新时间: 2015-1-23 14:52:33
- 返回列表
前提
只有在普通文档流中垂直相邻外边距会合并。
行内框,浮动框或者定位之间的外边距不会合并。
1.相邻元素有多个外边距
<ul>
<li>line 1</li>
<li>line 2</li>
</ul>
<h3>This is h3 line.</h3>
ul{margin-bottom:15px;}
li{margin-top:10px;margin-bottom:20px;}
h3{margin-top:28px;}
ul下边距为15px,li下边距为20px,h3上边距为28px,外边距合并会取大值而非相加,由此line 2与h3间距为28px。
注:如果给ul加一个边框,li下边距将被放在ul内部,此时只会发生ul与h3之间的合并。
如果ul,h3外边距都为负值,则取值大的负外边距与大的正外边距相加,得到间距。
2.块元素内部包含块元素(父元素没有设置内边距或者边框)
<div id="outer">
<div id="inner"></div>
</div>
复制代码
#outer{
width:200px;
height:100px;
background:rgb(245,138,158);
margin-top:20px;
}
#inner{
width:50px;
height:50px;
background:rgb(147,172,213);
margin-top:10px;
}
复制代码
inner没有预想中的相对outer下沉10px,而是保持和outer位置相对不变,outer整体下沉10px。此时如果设置outer的上外边距为20px,两者相较取其大,整体outer下沉20px。
如果给父元素加边框(或内边距)隔开内部元素的外边距,则不会发生外边距合并:
#outer{border:1px solid rgb(147,172,213);}
注:块元素内包含行内元素的话不会发生外边距合并(见水平居中与垂直居中)。
空元素的上下外边距合并
<div class="blank"></div>
<div class="focus"></div>
<div class="blank"></div>
复制代码
.blank{
width:100px;
height:50px;
background:rgb(245,138,158);
}
.focus{margin:10px 0 20px 0;}