CSS 盒模型之外边距 margin属性

外边距会在元素外创建额外的空白区域，这个区域不能放置其他元素。因此，大多数情况下，普通流中都是通过外边距来控制元素之间的距离，使元素间出现间隔。

外边距默认是透明的，在这个区域中可以看到父元素的背景。也不能通过任何属性，来为外边距设置颜色，或让其不透明。但是，可以通过 margin属性来设置外边距的宽度，其值可以是百分比、长度值、或 auto。

由于外边距也是可选的，默认值是 0。所以，如果没有显式声明 margin属性，元素就不会出现外边距。同样，浏览器也为外边距提供了默认的样式，需要设计师进行重置。如：

1. body, p, h1, h2, h3, ul, ol {
2. margin: 0;
3. }

使用长度值设置外边距时，可以接受任何长度值，包括绝对长度和相对长度。如，在段落元素周围应用一个 10px 的空白区域：

1. p {
2. margin: 10px;
3. }

使用百分比设置外边距时，元素的左右外边距和上下外边距，都是相对于父元素的 width 进行计算。如果父元素的 width 以某种方式发生改变，外边距的值也会随之改变。

外边距的值也可以混合使用长度值和百分比，并且，可以使用各种类型的长度值。如果希望一个元素各边上的外边距不同，同样遵循上、右、下、左的模式，也允许提供 1~4 个值，作用规则与 padding 相同：

1. p {
2. margin: 10px 10% 2em 20mm;
3. }

CSS也为外边距提供了单边的属性，使用其中任何一个属性，将只设置该边上的外边距，而不影响其他外边距：

1. p {
2. margin-top: 10px;
3. margin-right: 20px;
4. margin-bottom: 30px;
5. margin-left: 40px;
6. }

一个元素的外边距可以是正值，也可以是负值。当元素之间是父子关系时，通过设置子元素的外边距为负值，可以将子元素从父元素中分离出来，或者与其他元素重叠。如，在一个容器 div 中，有两个段落：

1. <div>
2. <p>这个段落的外边距为正值</p>
3. <p>这个段落的外边距为负值</p>
4. </div>

现在，把第一个段落的外边距设置为正值，第二个段落的外边距设置为负值。为了方便查看，为容器和段落都设置了虚线边框：

1. div {
2. width: 300px;
3. border: 1px dashed #ccc;
4. }
5. div p {
6. border: 1px dashed #ccc;
7. }
8. div p:nth-child(1) {
9. margin: 10px;
10. }
11. div p:nth-child(2) {
12. margin: 10px -30px;
13. }

上述代码的运行结果如图 4‑3 所示：

图4-3 负外边距

从上图可以看出，负外边距导致第二个段落超出了容器，跑动了容器的外面，似乎它的尺寸比容器宽了 60px。然而，根据数学计算，这个段落的 width 计算值加上其左右外边距，刚好等于容器 div 的 width，它并没有比容器更宽。

在把一个元素的 margin属性设置为负数时，一定要倍加小心，因为元素可能部分或完全脱离页面，或覆盖页面上的其他内容。

当然，有时候可以利用这个特性，把一个元素的 margin属性设置为一个很大的负数，使它移动到屏幕之外，来隐藏这个元素。然后，在需要的时候，恢复其 margin属性，让它正常显示出来。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。