box模型之margin

我们都知道margin的一点知识，但似乎又不全面，我争取写的全面一点。
我觉得最重要的一点是下面这句话（摘自 CSS Mastery）：

Margin collapsing only happens with the vertical margins of block boxes in the normal flow of the document. Margins between things like inline boxes, floated boxes, or absolutely positioned boxes never collapse.

记住这里面有三个关键词：vertical margin、block boxs、normal flow。

简单解释一下：
* vertical margin：水平方向的margin不会压缩在一起，只有垂直方向的才可以
* block boxs：盒子模型分为三种，只有block box和inline block这两种盒子模型才符合要求
* normal flow：所有的盒子类型的元素的position属性都有一个默认值：static，这种static属性的元素属于normal flow。position属性为relative的也属于normal flow。position属性为absolute何fixed的元素脱离了normal flow。

一共有四种发生collase的情况：

1.一个元素的top margin与另一个元素的bottom margin发生collapse

如上图所示：上面一个元素的margin-bottom为30px，下面元素的margin-top为20px，此时两个元素之间的margin会压缩，压缩后取较大的值30px。

2.元素嵌套时，子元素的top margin和父元素的top margin发生collapse

这种情况下，压缩后的margin也采取较大的值。

3.一个空元素的top margin和自己的bottom margin发生自压缩

这种情况比较奇怪，但是切记这种情况下也会发生压缩。

4.两个空元素嵌套，内部空元素已经压缩的margin和父元素的margin再次压缩

可以想象，一开始一共四个margin,最后压缩成了一个margin。

多问一句为什么？
浏览器的渲染引擎或称为布局引擎在渲染html源文件的时候，只要遇到两个margin，就会将其压缩，并且取其最大值。渲染引擎不区分top margin或者bottom margin，只要是margin就会collapse。

再多问一句为什么？

题外话：一个很重要的学习方法就是多对自己提问。美籍匈牙利数学家波利亚的《怎样解题》的本质就是通过苏格拉底式的诱发式提问让你自己找到答案。我们的大脑内置一个搜索引擎，一旦你对自己提问，你的大脑会忍不住自己去寻找答案。我们的思维是以问题为导向的，思考水平的高低本质上是你对所学习对象的提问的水平的高低。编程随想说，要对自己三个问题：what、how、why。刘未鹏说要知其然((why)，更要知其所以然(why why)。

言归正传，为什么浏览器的设计者会让垂直方向的两个margin发生collapse呢？
margin提出的最初的出发点就是控制盒子模型之间的距离的。从这个角度出发，两个盒子都设置了margin，会影响布局的美观。举例如下：

有三个p元素，p元素的默认样式有top margin和bottom margin。如果不发生collpase，如上图左侧，第一个p元素和第二个p元素之间的margin是最上面的margin的两倍，会影响整体的布局美观。

这篇文章比较全面的介绍了一下margin collapse的相关知识，还是想强调一下其适用条件：

• vertical margin
• block boxs
• normal flow

最后，希望对自己提问的方法论对你有用，非常棒（smile）！