垂直外边距的重叠（折叠）

垂直外边距的重叠（折叠）

相邻的垂直方向外边距会发生重叠现象

1、兄弟元素

兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况：

若相邻的外边距一正一负，则取两者的和

若相邻的外边距都是负值，则取两者中绝对值较大的

兄弟元素之间的外边距的重叠，对于开发是有利的，所以不需要进行处理

2、父子元素

父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

父子元素之间的外边距重叠，会胡影响到页面的布局，必须要进行处理

---

处理思路（非优秀方案）：

1、不用外边距。

给父元素使用一个padding-top，父元素会被撑开，将撑开的大小

从父元素的height中减去即可

2、不让其相邻。

a）给父元素使用一个border-top将父与子的外边距隔开，颜色也要一

致，然后将子元素的margin-top调小给的border-top的宽度

b）利用clearfix（清除浮动）可以解决垂直外边距重叠问题（也可解

决高度塌陷问题）

clearfix示例：

.clearfix::before,
.clearfix::after{
					content'';
					display:block;
					clear:both;
}

注：

.clearfix::before{
					content'';
					
					display:table;
}								`此部分代码解决外边距重叠问题`





.clearfix::after{
					content'';
					
					display:table;	
				//display:table既可以解决高度塌陷又可以解决外边距重叠
				//display:block只能解决高度塌陷，不能解决外边距重叠
					
					clear:both;
}								`此部分代码解决高度塌陷问题`