垂直外边距的重叠(折叠)
垂直外边距的重叠(折叠)
相邻的垂直方向外边距会发生重叠现象
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;
} `此部分代码解决高度塌陷问题`