外边距

网页设计中大多数正常流元素间出现的间隔都是因为存在元素外边距，设置外边距会在元素外创建额外的“空白"。“空白”通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景。

设置外边距的最简单的办法就是使用属性margin。

margin值：[<length>I<percentage>I auto]{1,4}|inherit

初始值：未定义

应用于：所有元素

继承性：无

百分数：相对于包含块的width

计算值：见各个属性

外边距设置为auto的效果在第7章已详细讨论过，所以这里不再重复。另外，网页设计中更常见的做法是为外边距设置长度值。假设你想将h1元素的外边距设置为1/4英寸。

h1(margin:0.25in;background-color:silver;}

这样会在h1元素的各个边上设置一个1/4英寸宽的空白。

margin可以接受任何长度度量。可以是像素、英寸，毫米或em。不过，margin的默认值是0，所以如果没有为margin声明一个值，就不会出现外边距。

不过，在实际中，网站制作人员对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持网站建设CSS的浏览器中。外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为P元素声明外边距，浏览器可能会自己应用某个外边距。当然，只要你特别做了声明，就会覆盖默认样式。

最后一点，还可以为margin设置一个百分数值。这个值类型的详细内容将在后面的“百分数和外边距"一节中讨论。

长度值和外边距

前面提到过，设置元素的外边距时，可以使用任何长度值。例如，要在段落元素外围应用一个10像素的空白区，这相当简单。以下规则会为段落指定一个银色背景和一个10像素的外边距，如图8-6所示：

P{background-color:silver;margin:10px;}

（同样地，增加背景色是为了帮助显示内容区，这里的虚线只是用于说明，在浏览器中并不真正出现。）如图8-6所示，为内容区的各边增加了10像素的空白。这个结果有些类似于HTML中使用hspace和vspace属性。实际上，可以使用margin设置一个图像周围的额外空间。假设希望所有图像周围都有1em的空白：

img(margin:1em;）

这就大功告成了。

有时，网站制作人员可能希望一个元素各边上的空白不同。这也很简单。如果希望所有h1元素的上外边距为10像素，右外边距为20像素，下外边距为15像素，左外边距为5像素，只需以下规则：h1{margin:10px 20px 15px 5px;}

这些值的顺序很重要，应当遵循以下摸式：margin:top right bottom left

要记住这个模式有个好办法，就是记住这4个值是从上（top）开始围着元素顺时针旋转的。一定要以这个顺序应用值，所以要得到你想要的效果，就必须正确地安排值的顺序。

注意：网页设计中还有一种很容易的方法可以记住应当以什么顺序声明各边的外边距，这就是要记住，以正确的顺序设置各边外边距有助于你避免“TRouBLe”，即TRBL，这代表“Top Right Bottom Left".

也可以混合使用各种类型的长度值。一个规则中并不限制只能使用一种长度类型，如下所示：

h2{margin:14px 5em 0.1in 3ex;}/*value variety!*/图8-7显示了这个声明的效果，这里提供了一点注解。

百分数和外边距

前面已经提到，可以对元素的外边距设置百分数值。百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式发生改变，百分数也会改变。例如，假设有以下规则，如图8-8所示：

p{margin:10%;}

<div style="width:200px;border:1px dotted;">

<p>This paragraph is contained within a DIV that has a width of 200 pixels,

so its margin will be 10%of the width of the paragraph's parent(the DIV).

Given the declared width of 200 pixels,the margin will be 20 pixels on all sides.</p>

</div>

<div style="width:100px;border:1px dotted;">

<p>This paragraph is contained within a DIV with a width of 100 pixels,so its margin will still be 10%of the width of the paragraph's parent.There will,therefore,be half as much margin on this paragraph as that on the first paragraph.</p>

</div>

与之对照，再考虑另一种情况，没有为元素声明width。在这种情况下，元素框的总宽度（包括外边距）取决于父元素的的width。这有可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素（或显示画布）的实际大小。如果对一个文档设置样式，使其元素使用百分数外边距，当用户修改浏览器窗口的宽度时，外边距会随之扩大或缩小。具体的设计选择取决于你。

你可能已经注意到，图8-8中的段落有些奇怪。不仅其左右两边的外边距会根据父元素的宽度改变，上下外边距也会随之改变。在CSS中这是期望行为。再来看属性定义，可以看到，百分数值定义为相对于父元素的width。这不仅应用于左右外边距，也应用于上下外边距。因此，网页设计给定以下样式和标记，段落的上外边距将是50px:

div p{margin-top:10%;}

<div style="width:500px;">

<p>This is a paragraph,and its top margin is 10%the width of its parent e1ement.</p>

</div>

如果div的width改变，段落的上外边距也会改变。看上去有些奇怪，是不是？这样来考虑，我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括其外边距）。如果一个元素的上下外边距是父元素的height的一个百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应地，上下外边距又必须增加，以适应新的父元素height，如此继续。规范的作者没有简单地忽略上下外边距百分数，而是决定让它与父元素的width相关，不会根据其后代元素的width而改变。

注意：对于定位元素，上下外边距如果是百分数值，其处理会有所不同，更多的详细内容参见第10章。

还可以混合使用百分数和长度值。因此，为了将h1元素设置为上下外边距都是0.5em，而左右外边距为浏览器窗口宽度的10%，可以如下声明。

h1 {margin:0.5em 10% 0.5em 10%;}

在此，尽管上下外边距总保持不变，不过左右外边距会根据窗口的宽度改变。当然，这里假设所有h1元素都是body元素的子元素，而body与浏览器窗口宽度相等。简单地说，h1元素的左右外边距将是h1父元素宽度的10%。

下面再来看这个规则：

h1 {margin:0.5em 10% 0.5em 10%;}

看上去有些冗余，是不是？毕竟，必须把相同的一对值键入两次。幸运的是，网站制作CSS提供了一种很容易的方法来避免这样做。