CSS（13）外边距
按照之前介绍的“元素内容（element）—>内边矩（padding）—>边框（border）—>外边距（margin）”的学习顺序，这一篇文章该学习元素的外边距了。外边距（margin）就是围绕在元素边框以外的空白区域，设置外边距会在元素外创建额外的“空白”。CSS中元素的margin属性用于置外边距，margin属性接受任何长度单位、百分数值甚至负值。
一、margin简写属性
1.为元素的各个边设置同样的固定大小的margin值：
下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：
/*设置一级标题的外边距为0.25英寸*/ h1 {margin : 0.25in;}
2.为元素的各条边设置不同的margin值：
与内边距（padding）的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的，可以表示为“margin: top right bottom left”。下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
3. margin 属性的百分比数值：
百分数是相对于父元素的 width 计算的。下面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
p {margin : 10%;}
4.设置margin的值为auto：
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距（当然，只要你特别作了声明，就会覆盖默认样式）。IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。
二、值复制
我们曾经在前面的"padding"之中提到过值复制。在设置CSS内边矩和外边距的过程中，有时候我们会输入一些重复的值：
p {margin: 0.5em 1em 0.5em 1em;}
通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：
p {margin: 0.5em 1em;}
这两个值可以取代前面 4 个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
•如果缺少左外边距的值，则使用右外边距的值。
•如果缺少下外边距的值，则使用上外边距的值。
•如果缺少右外边距的值，则使用上外边距的值。
下图提供了更直观的方法来了解这一点：
图1-值复制
换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
三、单边外边距属性
我们可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：
p {margin-left: 20px;}
我们可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
•margin-top
•margin-right
•margin-bottom
•margin-left
一个规则中可以使用多个这种单边属性，例如：
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
当然，对于这种情况，使用 margin 可能更容易一些。我们也推荐使用简写的margin属性以缩小页面尺寸。
p {margin: 20px 30px 30px 20px;}
四、外边距合并
1.外边距合并的规则：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
a.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
图2-相邻元素外边距合并
以下是普通文档流中两个相邻的元素margin-bottom和margin-top合并的完整示例：
View Code
1 <html> 2 <head> 3 4 <style type="text/css"> 5 * { 6 margin:0; 7 padding:0; 8 border:0; 9 } 10 11 #d1 { 12 width:100px; 13 height:100px; 14 margin-top:20px; 15 margin-bottom:20px; 16 background-color:red; 17 } 18 19 #d2 { 20 width:100px; 21 height:100px; 22 margin-top:10px; 23 background-color:blue; 24 } 25 26 </style> 27 </head> 28 29 <body> 30 31 <div id="d1"> 32 </div> 33 34 <div id="d2"> 35 </div> 36 37 <p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p> 38 </body> 39 </html>
b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
图3-包含元素外边距合并
以下是包含元素外边距合并的示例：
View Code
1 <html> 2 <head> 3 4 <style type="text/css"> 5 * { 6 margin:0; 7 padding:0; 8 border:0; 9 } 10 11 #outer { 12 width:300px; 13 height:300px; 14 background-color:red; 15 margin-top:20px; 16 } 17 18 #inner { 19 width:50px; 20 height:50px; 21 background-color:blue; 22 margin-top:10px; 23 } 24 25 </style> 26 </head> 27 28 <body> 29 30 <div id="outer"> 31 <div id="inner"> 32 </div> 33 </div> 34 35 <p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p> 36 </body> 37 </html>
2.外边距合并的原因
为什么会有元素外边距的合并呢？外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。如下图，以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
图4-段落外边距合并使布局一致
说明：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
外边距参考：http://www.w3school.com.cn/css/css_margin.asp
外边距合并参考：http://www.w3school.com.cn/css/css_margin_collapsing.asp
