挖掘margin属性的内涵

1、margin合并问题

块级元素的上边距和下边距有时会合并或者折叠为一个外边距

捕获到的重要信息

只发生在块级元素，但不包括浮动元素和绝对定位元素
只发生在和当前文档流方向的相垂直的方向上（由于默认文档流是水平流，因此发生margin合并的就是垂直方向）

会出现外边距合并的三种基本情况

1、相邻元素之间

<p>第一行</p>
<p>第二行</p>
p {margin: 1em 0;}

第一行和第二行之间的间距还是1em，因为第一行的margin-bottom和第二行的margin-top合并了

2、父元素和它第一个或最后一个子元素之间

当父元素和它第一个子元素之间没有边框、内边距、行内内容或者清除浮动将两者的margin-top分开
同样的当父元素和最后一个子元素之间没有边框、内边距、行内内容、height、min-height/max-height将两者的margin-bottom分开，那么这时，两个外边距就会合并，子元素的外边距就会溢出到父元素外面（父元素的外边距为两者之和，子元素的外边距为0）

在默认状态下，下面三种设置是等效的

<div class="father">
    <div class="son" style="margin-top:80px;"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father" style="margin-top:80px;">
    <div class="son" style="margin-top:80px;"></div>
</div>

3、空的块级元素

当一个块级元素中不包含任何内容时，并且在其margin-top和margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开，此时外边距会合并

<div class="father">
    <div class="son"></div>
</div>
.father {overflow:hidden;}
.son {margin:1em 0;}

此时.father所在的这个父级<div>元素高度仅仅是1em，因为.son这个空<div>元素的margin-top和margin-bottom合并在一起了

margin合并的计算规则

正正取大值：取大的那个值
正负值相加：取计算后的值
负负最负值：取绝对负值最大的值

margin合并的意义

1、兄弟元素的margin合并

使图文信息的排版更加舒服自然，保证元素上下间距一致

2、父子margin合并的意义

在页面中任何地方嵌套或直接放入任何空标签，都不会影响原来的块状布局

3、自身margin合并的意义

可以避免不小心遗落或者生成的空标签影响排版和布局

阻止以上margin合并的发生

1、阻止margin-top的合并（满足一个条件即可）

父元素设置为块状格式化上下文元素（比如overflow:hidden）
父元素设置border-top值
父元素设置padding-top值
父元素和第一个子元素之间添加内联元素进行分隔

2、阻止margin-bottom合并

父元素设置为块状格式化上下文元素
父元素设置border-bottom值
父元素设置padding-bottom值
父元素和最后一个子元素之间添加内联元素进行分隔
父元素设置height、min-height或max-height

3、阻止空标签margin合并

设置垂直方向的border
设置垂直方向的padding
里面添加内联元素
设置height或者min-height

以上需要注意的地方

以上情况的组合会产生更复杂的外边距合并
即使某一外边距为0，这些规则仍然适用，所以就算父元素的外边距为0，还是会出现第二种情况
如果参与合并的外边距中包含负值，合并后的外边距等于最大的外边距与最小的外边距之和
如果所有参与合并的外边距都为负值，合并后的外边距等于最小的外边距的值

2、深入理解margin:auto

margin:auto的填充规则

如果一侧定值，一侧auto，则auto为剩余空间大小此时.son的左边距为20px、右边距为80px
如果两侧auto，则平分剩余空间

margin:auto的隐藏用法

为块级元素自适应左中右对齐和内联元素使用text-align控制左中右对齐相呼应

3、为什么容器定高、元素定高、margin:auto却无法垂直居中

默认文档流是水平方向

解决方案

使用writing-mode改变文档流的方向

.father{

height:200px;
writing-mode:vertical-lr;

}
.son{

height:100px;
margin:auto;

}

此时.son就是垂直居中对齐的，但是水平方向就无法auto居中

绝对定位元素的margin:auto居中

.father{
    width:300px;
    background-color:#999;
    height:200px;
    position:relative;
 }
.son {
    width:200px;
    background-color:#ccc;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

IE8以及以上版本浏览器才支持，但却是最好用的块级元素垂直居中对齐方式