外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。
规则如下:
- 两个或多个毗邻的普通流中的块元素垂直方向上的 margin会折叠
- 浮动元素 / inline-block元素 / 绝对定位元素 / 行内元素的margin不会和垂直方向上的其他元素的margin折叠
- 创建了块级格式化上下文(BFC)的元素,不会和它的子元素发生margin折叠
我们可以利用外边距塌陷进行很多操作:
- 居中
.divA {height: 80px;width: 200px;background: #6ddb14;margin-bottom: 40px;}.divB {height: 40px;width: 200px;background: #0f80a2;margin-top: -100px}