在我刚开始学习html的时候，几乎所有会的人都说最多一个星期就学会了。当我学习css到了一定阶段的时候，觉得也挺容易的呀，为什么有那么多人都做了那么久，还在那儿研究什么呢？与此同时，还有很多人去吐槽jquery，说它就是设计师玩儿的东西，前端敲代码的你应该去研究js以及各种框架诸如此类等等，反正你要让自己在搞的东西别人听了觉得高大上、不明觉厉就对了。这样的现象也不能说不好，因为毕竟还是在不断的学习，可是，不得不说也是浮躁的表现，高手用树叶都能杀人，你却一直只想要绝世好剑，在鄙视自己的道路上前进不止~问题是你也顺便鄙视了别人，呵呵。

   每种技术确实都存在着一些不足，但亮点也绝对是大于不足的，还远没到被你说烂的地步，不然它也不会那么流行并且被你知道和愿意学习。

   不多说了，回到正题——margin。

   我们平时在写代码的时候，经常会拿一个词用来形容显示异常，叫“bug”。bug它也分为“人为”和浏览器。margin的这个叠加算不算呢？~在遇到这些问题的时候，你绝不能仅仅是觉得不对劲，或者以一句“应该是浏览器的问题吧“去敷衍过去，而是要进一步寻求真相。

   margin的叠加有三种方式

   第一种方式我觉得大家都不会去忽视，那就是两个上下相邻的元素，上边元素的下外边距会与下边元素的上外边距叠加，叠加的意思不是二者相加，而是取更大者。

   绿色边框是h2标题，未消除底外边距，计算之后近似12px，但红色箭头所标出的外边距为30px，是蓝色边框容器所添加的上外边距。此为不同元素间的上下重合。

   第二种是有容器之间的嵌套，父元素和子元素外边距也会相叠加，有一个条件是，中间没有边框和外边距存在，那到底是谁没有边框或者内边距呢，父元素还是子元素？

   此图中，蓝色边框30px上外边距未变。红色边框元素添加了50px上外边距，看起来很正常，

   把红色边框的上边框去掉了，也正常

   此图中，蓝色边框去除，哇偶，父子紧紧贴在了一起亲密无间~而且父元素和上面的元素的边距变成了50px！由此可见，取决于父元素的边框~那么，加个内边距试试呢？

   咱给父元素加了10px的内边距，好吧，父子又分离了。由此可见，内边距也是取决于父元素。

   子元素加内边距和去除边框的情况就不在这里跟大家展示了，已测对边距叠加无影响。

   第三种呢，那就是，自己跟自己打架。同样要求无边框和内边距。

   为了方便(也就是方便我自己罢了，哈哈)，咱在刚才那个红色边框容器里加上个容器

   再澄清一下纯属为了方便哈，跟另外俩容器没任何关系，当然，可以用来对比。不过。。咦，你加的是啥？容器呢？你这么做可不好，什么都看不到怎么能明白呢？！

   好吧，千万不要怪我，下面分开解释

   一、自己跟自己打架是有个前提的，那就是，元素为空，空是什么意思呢，内容为空，而且没有高度，这样上下外边距就碰面了，就可以打了~所以你什么都看不到了。

   二、你说什么都看不到，但我明明看到了啊，红色容器不是被撑开了么，这就是奥妙所在，其实我在里面放了俩容器，而且，都加了外边距，什么？是的，都各加了30px的上下边距，什么？！是的，你没看错，理论上讲，这里应该有120px像素的高度出来，就算加上上面说的上下元素的边距会发生叠加，那也有90px吧？好吧，咱就算再退一步讲，中间30px也没了，那咱得有60px吧至少，可结果就是，只有30px了，这是见人杀人，见佛杀佛的节奏啊，这么一个小小的空白信息量也太丰富了吧？是不是醉了？~如果，你还是不相信它的残忍，再加几个也没关系，结果相同，还是30px。

   友情提示，这种外边距叠加只是在普通流的块框元素才存在，而且是垂直外边距！行内框、浮动框、绝对定位框，没有这些叠加的出现。

   好了，margin叠加的事儿咱就先说到这儿，其中奇妙还得各位自己去感受了。

   第三种情况应该是极少会碰到的，因为一般不会出现这种用途的空元素，如果你只知道第一种而不知道第二种，那请相信你早晚会碰到第二种的，碰到的时候你会怎么办？索性不用外边距了？这的确是一种方法，可是，你不会总是能躲过去一些问题。

   就像是文章开头所说的那样，这个话题只是一个引子。其实一个人的技术水平的提高就在于，不要勤于去说”知了“，而是要勤于发问，为什么？真的是这样么？还可以怎样？然后去实践、验证。再者，每个人都不会是全面系统的学习了之后才开始做页面的，都会时常带着一种兴奋去尝试，这样就难免只看到了知识的一面而漏掉了其他，或者理解不到位。时间长了就会遇到所谓的”瓶颈“~时常的去回顾，或者多找资料多方学习，才能让自己不断发现自身不足，不断进步，更全面，功夫更深。与大家共勉！~欢迎一起交流。

   另推荐《精通css：高级web标准解决方案(第2版)》这本书，更适合有一定css编写经验的人看，收获会更大

   因朋友提醒，又参考了一下别人的资料，在margin叠加的条件方面做如下修正：

   相关链接http://www.smallni.com/collapsing-margin/

   1.父子元素(分2种情况)之间发生margin叠加的条件：

   父元素和第一个子元素发生margin-top叠加

   父元素没有创建BFC(文章底部对BFC有简要介绍)

   父元素和第一个子元素之间没有非空内容

   父元素没有border-top

   父元素没有padding-top

   父元素和最后一个子元素发生margin-bottom叠加

   父元素没有创建BFC

   父元素height为auto、min-height为0

   父元素和最后一个子元素之间没有非空内容

   父元素没有border-bottom

   父元素没有padding-bottom

   2种情况都总结了，那么让他们不发生外边距叠加也就显得很容易了：

   为父元素创建BFC

   为父元素设置相应的padding或者border

    2.兄弟元素之间发生外边距叠加的条件：

   兄弟元素都不是float元素

   兄弟元素都不是absolute元素

   兄弟元素都不是inline-block元素

   什么情况下会创建BFC ——Block Formatting Context (块格式化上下文)？

   CSS 规范说明了在下列这些情况下会创建新的 block formatting context：

   浮动元素(float: left | right)；

   绝对定位元素(position: absolute | fixed)；          行内块元素(display: inline-block)；

   表格的单元格(display: table-cells，TD、TH)；  表格的标题(display: table-captions，CAPTION)；

   'overflow' 特性不为 visible 的元素(除非该值已经传播到viewport)； 表格元素创建的 "匿名框"

   注意，"display:table" 本身并不产生 "block formatting contexts"。但是，它可以产生匿名框 6， 其中包含 "display:table-cell" 的框会产生块格式化上下文。 总之，对于 "display:table" 的元素，产生块格式化上下文的是匿名框而不是 "display:table"

   注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下文。

   修正告一段落，具体大家可以自行验证，欢迎学习交流！~

建议继续学习：

1. margin-left负值定位，在ie6下面错位的解决办法    (阅读：1657)
2. CSS中的margin外边距折叠现象    (阅读：1062)
3. margin那些事儿    (阅读：735)