外边距叠加问题

2019独角兽企业重金招聘Python工程师标准>>>

       记得有一段时间了，看过一篇文章，写的是关于外边距margin叠加，当时还勉勉强强能看懂，但是一直不知道怎么解决那个问题，毕竟自己也没有遇到过这个问题，今天看了一个大神的博客才知道我是如此的天真和幼稚，现在我就简单的把大神总结的东西写出来给大家看看吧。

        首先我们要知道外边距叠加是什么，要不先来一个w3c的官方解释：

         In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

        这英语看着就头痛啊，来看看简单的翻译吧：

         在CSS中，两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加(collapsed margin)。

         或许大家还是不能完全的理解，那我就简单的解释一下吧，在父子元素里，第一个是：在普通流（非BFC）中，父元素为块级元素（没有border-top、没有padding-top）的margin-top和它的第一个普通流中的子元素（没有clear）发生margin-top叠加。

第二个是：在普通流（非BFC）中，父元素为块级元素（height为auto、min-height为0、没有border-bottom、没有padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生margin-bottom叠加。

在兄弟元素中必须满足几个条件，首先要满足是在普通流（非BFC）中，其次分别为相邻元素，且是在垂直方向上，并且没有非空内容，如border、padding、clear。在满足这些条件的时候，当上一个元素有margin-bottom且下一个兄弟元素有margin-top会发生外边距叠加，并且叠加之后为数值大的那个。

       不管你看没有看懂，但是这就是外边距叠加，要是能找到一些图就好了，不过没关系，发挥自己的想象力，比什么图都好，我都能看懂，你为什么不能看懂，好了，闲话不说，我们现在来看看怎么解决这个问题。

       上面我们看到了发生外边距叠加需要几个条件，所以说我们只需要打破这几个条件就可以了，首先我们可以为父元素创建BFC（不知道是什么的自己去查）或者为父元素设置padding、border。在兄弟元素中我们可以为兄弟元素创建BFC，比如float、absolute、inline-block，还可以设置padding、border。

        但是我想说的是，这些所谓的解决方法都是坑爹的，为什么这么说，我们为父元素创建BFC就是为了解决外边距叠加？我们要知道，外边距叠加一直都是w3c中制定的一个规范，是为了防止元素之间不小心同时设置了margin，这是一个合理存在的东西，但是却被有的人认为是一个BUG的存在，所以我们应该把外边距叠加当作一个规范而不是BUG，最好的方法就是在设置margin的时候都尽量写一个方向的margin（top  or  bottom）。最后说一点，一个元素自身也会发生外边距叠加，条件是如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素。

        最后希望每一个从事前端工作的人员都严谨的对待每一个问题，因为前端是一个涉及面很广很深的行业。

转载于:https://my.oschina.net/Lonniecode/blog/137433