两个margin重叠了怎么办呢？

Question

两个margin重叠了怎么办呢？

Answer 1

Margin Collapse 是 CSS 中盒模型的一大特性，建议题主好好了解。
这里如果希望合并的话，改用 padding 比较方便。

Answer 2

最方便的是改成 padding.

或者使用 BFC 解决外边距重叠, 参看: https://segmentfault.com/a/11...

了解重叠的原理, 参看: https://segmentfault.com/a/11...

Answer 3

1. 使用padding

2. 统一使用margin-top或者margin-bottom，不要两者兼用

3. 使用BFC，例如overflow：hidden；

Answer 4

普通流（normal flow）中 同一个BFC内 的块级元素的相邻的（也就是两个margin是紧挨着的，中间没有border或padding）垂直外边距会发生外边距叠加。

以上条件缺一不可，凑齐了就会发生外边距叠加。
怎么解决呢，
1，让它不在普通流中：设置浮动，absolute绝对定位。
2，不是块级元素：display改成inline-block。
3，不再相邻：加padding或者border 相应地减小margin。

这些都很麻烦，最好不要等发生了外边距叠加再来改代码，尽量开始写的时候就用同一个方向的margin。

w3c关于外边距叠加的文档：
中文非官方：
http://www.ayqy.net/doc/css2-...
英文官方版：https://www.w3.org/TR/CSS2/bo...