CSS 盒模型以外边距 margin属性

外边距会在元素外建立额外的空白区域，这个区域不能放置其余元素。所以，大多数状况下，普通流中都是经过外边距来控制元素之间的距离，使元素间出现间隔。css

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

因为外边距也是可选的，默认值是 0。因此，若是没有显式声明 margin属性，元素就不会出现外边距。一样，浏览器也为外边距提供了默认的样式，须要设计师进行重置。如：html5

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

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

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

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

外边距的值也能够混合使用长度值和百分比，而且，可使用各类类型的长度值。若是但愿一个元素各边上的外边距不一样，一样遵循上、右、下、左的模式，也容许提供 1~4 个值，做用规则与 padding 相同：github

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

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

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

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

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 所示：less

从上图能够看出，负外边距致使第二个段落超出了容器，跑动了容器的外面，彷佛它的尺寸比容器宽了 60px。然而，根据数学计算，这个段落的 width 计算值加上其左右外边距，恰好等于容器 div 的 width，它并无比容器更宽。

在把一个元素的 margin属性设置为负数时，必定要倍加当心，由于元素可能部分或彻底脱离页面，或覆盖页面上的其余内容。

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