div外边距的问题

垂直外边距合并问题

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
多个块级元素的的margin-top和margin-bottom属性在满足一定条件下，会合并成一个值比较大的那个margin值，这就是外边距折叠或外边距合并 
Margin collapsing occurs in three basic cases:
发生在以下3种情况
Adjacent siblings
相邻的兄弟块元素之间
The margins of adjacent siblings are collapsed (except when the later sibling needs to be >cleared past floats). For example:、
相邻兄弟块元素之间的上下边距将会被合并
<p>The bottom margin of this paragraph is collapsed...</p>
<p>...with the top margin of this paragraph.</p>

Parent and first/last child
父元素和它的第1个子元素和最后一个子元素之间
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
如果父元素没有border-top、border-bottom，padding-top、padding-bottom，行内元素，和clearance属性来隔离与第1个块级子元素的margin-top，或没有border，padding,内联元素，height，min-height，max-height属性来隔离与最后一个块级子元素的margin-bottom属性，那么它们之间的margin-top和margin-bottom属性合并

Empty blocks
空块级元素
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
如果一个块级元素没有border-top、border-bottom，padding-top、padding-bottom,行内元素，height，min-height，max-height属性来隔离自身的margin-bottom和margin-top属相，那么margin-top和maring-bottom将合并

More complex margin collapsing (of more than two margins) occurs when these cases are combined.
当上面3种情况组合出现的时候，情况和复杂些

These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.

以上规则在margin-top、margin-bottom为0的情况下依旧适用，那么就会出现第1个子元素和最后一个子元素的margin出现在父元素外面的情形，请不要奇怪

When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.

当margin-top、margin-bottom为负值时，规则依旧适用，取值为最大正值和最小负值之间的和

Margins of floating and absolutely positioned elements never collapse.
floating元素和绝对定位的元素margin值绝对不会合并

<div style="width:400px;height:400px;background-color:blue;">
    <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div>
</div>

就符合第2种情况父子元素垂直边距的合并
外层DIV元素没有margin-top值没有指定，就认为其值为0
第1个块级子元素的maring-top为100px,按照合并规则，2个margin-top合并成一个100px的margin-top，也即是父DIV的margin-top为100px，同时子元素共享了父元素的margin-top区域,其内边框位置现在父DIV的top位置
视觉效果就如同没有外边距合并按正常理解的效果：

<div style="width:400px;height:400px;background-color:blue;margin-top:100px;">
    <div style="width:200px;height:200px;background-color:red;"></div>
</div>

<div style="width:400px;height:400px;background-color:blue;border-style:solid;">
    <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div>
</div>

就是没有垂直外边距合并的效果
如果代码修改成

<div style="width:400px;height:400px;background-color:blue;border-left-style:solid;">
    <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div>
</div>

或

<div style="width:400px;height:400px;background-color:blue;border-right-style:solid;">
    <div style="width:200px;height:200px;margin-top:100px;background-color:red;"></div>
</div>

还是执行垂直外边距合并