汇道科技：快速应对margin经典（外边距叠加）问题！

  很多刚刚接触css的的朋友们，都会听到过这句话：“能用padding的地方就不要用margin”但其实很多人都不清楚到底会出现什么问题？人就习惯于用“有问题”来概括一个还没弄明白也没找到解决方案的问题，当然这是消极的。汇道科技人的处事方法：我们应该面对问题，解决问题。

首先我们要明白Margin是什么？

Margin这个概念本身并不难，会css的都知道box盒模型，它就是盒与盒之间的间距，俗称外边距，也有叫外补白的。

问题：外边距叠加

什么是叠加：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，我们主要需要注意的是：

块元素：行级元素跟块元素是有区别的，所以，大家可能经常采用display：inline-block；使其块级化作为行级元素，它可以做到的是border、padding、水平margin，不能做的是width、height和垂直margin，有时候不必盲目的去把它块级化。

  两个或多个毗邻：有人可能认为挨着排列的同类元素才称为兄弟，这是一种惯性误解。这样的误解同样存在于js的当中的兄弟元素，所以，应该首先跳出这个区域，才能更好的看待叠加，当然margin的叠加也不仅是同级的元素会，父与子也会，甚至能够再向外延伸，也就是说，它具有“穿透力”，仿佛盒子没了边界，什么样的边界才能称作毗邻呢？只要两个容器之间没有被非空内容、padding、border 或 clear 分隔开，那么就可以称作毗邻。 当然，还有一种特殊情况，那就是空元素自身的上下边距，也会重叠。

  普通流：float和绝对定位等情况会使元素脱离普通文档流。

  垂直：叠加只是垂直方向会发生，水平则不会。

有人会问：如果不想它叠加怎么办呢？

  1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）

  2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠。

  我们在解决这些问题的时候，都是为它们添加了额外的规则，这些规则所造成的影响和去除影响的代价也是不可估的汇道科技：解决问题要从根本性着手，如果不能出现叠加，掌握好规避叠加发生的方法，“消除叠加，不如本来就没有叠加”！