什么是外边距重叠?如何解决外边距重叠?

外边距重叠指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。

什么情况下外边距会出现重叠情况?

1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值

2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值

3、两个外边距一正一负时，折叠结果是两者的相加的和

外边距不重叠的情况

·水平margin永远不会重合

·设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠

·设置了绝对定位(position:absolute)的盒模型，垂直margin不会被重叠，和子元素之间也不重叠

·设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠

·根元素(如html)与body的margin不会重叠

防止外边距重叠方法有哪些?

·元素绝对定位postion:absolute;一般用在内层元素

·内层元素加float:left;或display:inline-block;

·外层元素用padding增加边距

·外层元素设置overflow:hidden;

·内层元素透明边框border:1px solid transparent;

猜你喜欢：

margin塌陷与合并问题怎么解决？

如何使一个盒子水平垂直居中？

css3画三角形的方法

CSS中px、em、rem有什么区别和不同？

黑马程序员HTML&JS+前端高手班