外边距重叠问题

什么是外边距重叠

Collapsing margins

在 CSS 中，相邻的两个或者多个盒子（可能不是兄弟节点关系）之间会合并形成一个边距，这种现象称为collapsed margin，翻译过来就是外边距折叠，外边距重叠等。

尤其注意的一点是只有垂直方向上的margin才会产生折叠的现象，水平方向并不会。

最常见的情况就是相邻的两个display:block的<div>放在一起就会产生边距重叠的现象：

http://icodex.me

还有一种情况是父子之间的块级元素也会产生外边距折叠：

http://icodex.me

解决方法

解决margin重叠的方式包括以下几种：

• float的元素和其他元素之间不会发生外边距折叠
• position:absolute或者position:fixed的绝对定位元素其他元素之间不会发生外边距折叠
• display:inline-block的元素其他元素之间不会发生外边距折叠
• 内部创建了块级格式化上下文（BFC）的父元素（例如float或者overflow的值不为默认值visible）和子元素之间不会发生外边距折叠
• 创建了 BFC 的父元素内部的子元素不会和其它不在当前包含块内的块级元素发生外边距折叠

虽然float，绝对定位的元素可以解决外边距折叠的问题，但是一般不推荐使用，因为float，绝对定位的元素脱离了正常流布局，需要配合top等定位属性一起使用才行。

如果要解决相邻元素的边距重叠问题，可以将其中一个元素放在创建了块格式化上下文的父元素内部：

http://icodex.me

vertical-align: baseline

vertical-align: middle

而如果要解决父元素和子元素之间的外边距重叠，可以使用overflow:auto/hidden或者display:flow-root给父元素内部创建新的 BFC，注意这时候只能解决父元素和子元素之间的外边距重叠，而内部子元素之间的外边距折叠仍然无法解决。

http://icodex.me

所以还是可以继续为其中一个子元素添加display:inline-block

http://icodex.me

这里有一个知乎上的讨论链接：如何解决外边距叠加的问题？ - 知乎 https://www.zhihu.com/question/19823139

从讨论的结果上来看就是不要对一个块级元素同时使用上下方向的margin，相邻元素设置相同方向上的margin，然后配合父元素的padding也能解决问题

http://icodex.me