合并外边距
CSS中,两个或多个盒(可能但不一定是兄弟)的相邻的垂直方向的margin会被结合成一个margin。外边距按这种方式结合叫做合并(collapse)
1、相邻的垂直外边距会合并,除了
- html和body的外边距不合并
- 元素如果带有clear属性(生成间隙clearance),上外边距与下外边距相邻(height为0),那么它的外边距会和兄弟的相邻外边距合并,但合并后的margin不会再和父级的下外边距合并。下面是例子:
没有clear属性产生的clearance时:
<style>
*{
margin:0;
}
.container{
margin: 50px;
background: pink;
}
.container>div{
width: 100px;
height: 100px;
text-align