3.3 外边距

外边距（margin）属性的功能正如它本身表示的意义，用于设定(X)HTML元素和在它外部的元素之间的外边距。外边距属性可以为给定的元素设定上外边距、下外边距、左外边距和右外边距四个属性。注意外边距值不从父元素中继承，因为如果这样的话会造成混乱。

3.3.1 外边距声明

有三种方法设定外边距属性值：长度、比例值或者auto。注意如果外边距值为0，就不需要添加px。

考虑下面这个CSS中的容器div。它的宽度为固定值300px，无margin属性。

从图3-4可看出容器与浏览器窗口相邻。容器没有声明margin属性，因此它的左边框靠着页面左边框，和边框的距离为<body>元素中声明的margin和padding之和。

图3-4 文档中的基本容器按文档的自然流水布局，紧挨左边，其间隔由<body>的margin和padding声明决定

给容器的每一边都设定对应的margin值，显示会有显著改变：

从图3-5可以看出，容器和浏览器窗口的关系完全不一样了。

图3-5 为容器各边设定外边距（margin）值后，显示发生变化

外边距缩写

有许多缩写方式可以将四个margin:value声明语句缩减为一个，如下

这里属性值的排列顺序非常重要，顺序为上外边距（20px）、右外边距（auto）、下外边距（1em）、左外边距（auto）。为了习惯这种排列顺序，可以将其想象成罗盘，北、东、南、西，第一位的值总为北；或者看作钟表，12点、3点、6点和9点，第一位的值为12点。

如果4个设定值相同，则声明语句可变得更简单：

类似的缩写方式在padding和其他属性中也常用到，以后会看到它们相应的应用。

3.3.2 用margin:auto将元素居中

CSS中将元素居中的最好的方法是把元素的左右外边距属性值设定为auto。对于常用的浏览器，这只需要设定width规则，左外边距和右外边距都为给定的auto值（如果没有这个规则，框会一直延伸以适应容器——这里指浏览器窗口）。基于前面的例子，可以构建以下规则：

大多数浏览器都支持这种设置。但IE 5/Win并不这样设置，它们通常让元素对齐左边框。在本书写作时，已有很多IE用户开始使用IE 6或将要使用IE 7了，但是还有相当多的IE 5用户，所以在此还是要提请注意。

其实这种设置在IE 5中也有一种很简单的方法可以实现。诀窍就是利用容器的父元素（本例中是<body>）中的text-align属性将容器居中。缺点在于<body>中的子元素都将继承这个属性值并将它们的内容全部居中，所以这个方法不太好。因此，我们针对所有主div的元素应用语句text-align:left来取消居中。