外边距合并
以下两种情况会出现外边距合并:
1.垂直相邻的两个盒子,当他们的垂直外边距相遇时,会合并为一个外边距。也叫外边距重叠。
1.1当外边距的数值都为正数时,取数值较大的。
1.2当外边距的数值都是负数时,取绝对值较大的。
1.3当外边距的数值一正一负时,取他们的和。
解决方法:
1. 只设置一个外边距
2.父子嵌套的盒子,子盒子设置的margin-top,会产生在父盒子身上.
2.1解决方案:
给父级添加一个 overflow:hidden;
3.外边距不重叠的情况.
2.1水平外边距永不重叠.
2.2设置了overflow(visible)的元素和它的子元素之间的margin不会重叠.
2.3设置了绝对定位的盒模型(因为脱离文档流?),垂直以及和子元素之间的margin不会重叠.
2.4设置了display:inline-block的盒子,垂直以及和子元素之间的margin不会重叠.
学习这个知识点的作用:了解盒子模型外边距的一些规则。