CSS重要属性之 margin 属性知识大整合(必看篇)

以下的分享是本人最近几天学习了margin知识后，大有启发，感觉以前对margin的了解简直太浅薄。所以写成以下文章，一是供自己整理思路；二是把知识分享出来，避免各位对margin属性的误解。内容可能会有点多，但都是精华，希望大家耐心学习。

以下的分享会分为如下内容：

1.margin 属性的简单介绍

　　1.1：普通流的 margin 百分比设置

　　1.2：绝对定位的 margin 百分比设置

2.margin 无法适用的元素

3.外边距折叠 (Collapsing margins)

　　3.1：Collapsing margins 初衷

　　3.2：Collapsing margins 类型

　　　　3.2.1：兄弟元素的 margin 重叠

　　　　3.2.2：父子元素的 margin 重叠

　　　　3.2.3：元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

4.折叠后 margin 的计算规则

　　4.1：参与折叠的 margin 都是正值

　　4.2：参与折叠的 margin 都是负值

　　4.3：参与折叠的 margin 中有正值，有负值

5.Collapsing margins 解决方法

1.margin 属性的简单介绍

在介绍margin之前，先剖上一张W3C标准盒模型的图片，以便读者可以查看相关位置。

　　

margin，顾名思义，叫做外边距。

margin的基本属性有以下几点

a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的大小范围。

b：margin 值可以是 宽度值、百分比值或 'auto' 这3者之一。注意，margin 必须带有单位，单位可以是像素、英寸、毫米或 em。

c：margin 百分比值是相对于父元素的 width 计算的。

d：当 margin 为 margin:10px 时，表示 top,right,bottom,left (逆时针)方向都是10px；当 margin 为 margin:10px 20px 时，表示上下方向为10px，左右方向为20px；当 margin 为 margin:10px 20px 5px 时，表示top方向为10px，左右方向为20px，bottom方向为5px；当 margin 为 margin:1px 2px 3px 4px 时，表示top方向为1px，right方向为2px，bottom方向为3px，left方向为4px。

上面通过对 margin 的简单介绍，我们知道 margin 的百分比值是相对于父元素的 width 计算的，但是普通流和绝对定位元素的margin的计算是又是不相同的。

1.1：普通流的 margin 百分比设置

在普通流元素中，margin 百分比值得计算是依据其父元素的 width 计算的。

1. <div class="container">  
2.             <div class="content"></div>  
3.         </div>  

1. .container {   
2.         width: 300px;   
3.         height: 300px;   
4.         background-color: lightpink;   
5.         margin: 10px;   
6.         display: inline-block;   <!--设置此值是有原因的，会在下面讲解。-->   
7.       }   
8.       .container .content {   
9.         width: 120px;   
10.         height: 120px;   
11.         background-color: lightgreen;   
12.         margin: 10%;   
13.       }  

可以看出， top left 方向的 margin 都是30px ( 300 * 10% = 30)。为父元素设置display是有原因的，会在下面小节提到，稍安勿躁。

注意，margin 四个方位的值都是依据父元素的 width 计算！

　　1.2：绝对定位的 margin 百分比设置

在绝对定位元素中，父元素若设置了relative/absolute/fixed，则 margin 百分比值是依据父元素的 width 计算的；父元素若无设置relative/absolute/fixed，则 margin 百分比值是依据 整个页面的 width 计算的。

1. .container {   
2.   width: 300px;   
3.   height: 300px;   
4.   background-color: lightpink;   
5.   display: inline-block;   
6. }   
7. .container .content {   
8.   width: 120px;   
9.   height: