挖掘margin属性的内涵

1、margin合并问题

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

捕获到的重要信息

1. 只发生在块级元素，但不包括浮动元素和绝对定位元素
2. 只发生在和当前文档流方向的相垂直的方向上（由于默认文档流是水平流，因此发生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的填充规则

1. 如果一侧定值，一侧auto，则auto为剩余空间大小

   

   此时.son的左边距为20px、右边距为80px

   

2. 如果两侧auto，则平分剩余空间

margin:auto的隐藏用法

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

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

默认文档流是水平方向

解决方案

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

   .father{

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

   }
   .son{

   height:100px;
   margin:auto;

   }

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

1. 绝对定位元素的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以及以上版本浏览器才支持，但却是最好用的块级元素垂直居中对齐方式