CSS 外边距

外边距

CSS 外边距会在元素外创建额外的空白区域，这个区域不能放置其他元素。因此，大多数情况下，普通流中都是通过外边距来控制元素之间的距离，使元素间出现间隔。外边距默认是透明的，在这个区域中可以看到父元素的背景。也不能通过任何属性，来为外边距设置颜色，或让其不透明。但是，可以通过 margin属性来设置外边距的宽度，其值可以是百分比、长度值、或 auto。由于外边距也是可选的，默认值是 0。所以，如果没有显式声明 margin属性，元素就不会出现外边距。同样，浏览器也为外边距提供了默认的样式，需要设计师进行重置。如：

body, p, h1, h2, h3, ul, ol  {

margin: 0;

}

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

p  {

margin: 10px;

}

使用百分比设置外边距时，元素的左右外边距和上下外边距，都是相对于父元素的 width 进行计算。如果父元素的 width 以某种方式发生改变，外边距的值也会随之改变。外边距的值也可以混合使用长度值和百分比，并且，可以使用各种类型的长度值。如果希望一个元素各边上的外边距不同，同样遵循上、右、下、左的模式，也允许提供 1~4 个值，作用规则与 padding 相同：

p  {

margin: 10px 10% 2em 20mm;

}

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

p  {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

}

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

<div>

<p>这个段落的外边距为正值</p>

<p>这个段落的外边距为负值</p>

</div>

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

div {

width: 300px;

border: 1px dashed #ccc;

}

div p {

border: 1px dashed #ccc;

}

div p:nth-child(1) {

margin: 10px;

}

div p:nth-child(2) {

margin: 10px -30px;

}

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

图4-3 负外边距从上图可以看出，负外边距导致第二个段落超出了容器，跑动了容器的外面，似乎它的尺寸比容器宽了 60px。然而，根据数学计算，这个段落的 width 计算值加上其左右外边距，刚好等于容器 div 的 width，它并没有比容器更宽。在把一个元素的 margin属性设置为负数时，一定要倍加小心，因为元素可能部分或完全脱离页面，或覆盖页面上的其他内容。当然，有时候可以利用这个特性，把一个元素的 margin属性设置为一个很大的负数，使它移动到屏幕之外，来隐藏这个元素。然后，在需要的时候，恢复其 margin属性，让它正常显示出来。