CSS Code复制内容到剪贴板

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 计算的。

CSS Code复制内容到剪贴板

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: 120px;   

10.   background-color: lightgreen;   

11.   position: absolute;   /*增加了改该属性*/  

12.   margin: 10%;   

13. }  

可以看出，margin 的值计算结果不再是30px了，而是变成 137px (我的电脑页面宽度为1370px)。这是因为子元素container设置了absolute，导致子元素脱离文档流，四个方位的值是依据页面进行定位，所以 margin值才会发生变化。如果想让子元素还是依据父元素定位，可以为父元素设置 relative/fixed/absolute 其中之一个值， 这样 margin 百分比计算还是 30px，跟普通流中margin 的一样。 同学可以亲自尝试一下。

2.margin 无法适用的元素

　　有以下元素设置 margin 值是没有效果的。

a：行内元素垂直 margin 值不起作用。

b：margin 非 table 类型的元素，以及 table 类型中 table-caption, table-cell 和 inline-table 这3类。例如 TD TR TH 等，margin 是不适用的。

c：对于行内非替换元素（例如 SPAN），垂直方向的 margin 不起作用。

3.外边距折叠 (Collapsing margins)

Collapsing margins，即外边距折叠，指的是相邻的两个或多个外边距 (margin) 会合并成一个外边距。margin 折叠 必须发生在普通流元素中。

　　3.1：Collapsing margins 初衷

　　Collapsing margins 的初衷就是为了让段落显示的更加好看。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

此图来源于 W3C

　　3.2：Collapsing margins 类型

3.2.1：兄弟元素的 margin 重叠

XML/HTML Code复制内容到剪贴板