外边距塌陷问题

发表于 | 分类于 |

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案一： 避免这样写就好了。。。。

解决方案二：详见我的另一篇博文利用BFC机制解决外边距合并问题

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
      <style>
	* {
		margin: 0;
		padding: 0;
	}
	
	.baba {
		/* border-top: 1px solid black; */
		height: 100px;
		width: 100px;
		background-color: red;
		margin-top: 30px;
	}
	.erzi {
		height: 50px;
		width: 50px;
		background-color: pink;
		margin-top: 10px;
	}
      </style>
  </head>
  <body>
<div class="baba">
		<div class="erzi">123</div>
</div>
  </body>


观察下图erzi块的效果，erzi与baba之间没有margin撑开，不是我们想要的效果


父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

解决方案：

  1. 可以为父元素定义1像素的上边框或上内边距。
  2. 可以为父元素添加overflow:hidden。


解决该问题后，erzi块与baba块有了我们想要的margin



待续。。。。