margin指的是元素与元素之间的距离，观察上节的图1，可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并投有紧贴着浏览器窗口的边框。这是因为body本身也是一个盒子，在默认情况下．body会有一个若干像素的margin，具体数值各个浏览器不尽相同。因此在body中的其他盒子，就不会紧贴着浏览器窗口的边框了。为了验证这一点，可以给body这个盒子也加一个边框，代码如下。

1. body{  
2.     border:1px black solid;  
3.     background:#cc0;  
4. } 

在body设置了边框和背景色以后，效果如图1所示。可以看到，在细黑线外面的部分，就是body的margin。lodidance.com

图1 margin的效果

下面如果再给div盒子的margin增加20像素，效果如图2所示。可以看到div的粗边框与body的细边框之间的20像素距离就是margin的范围。右侧的距离很大，这是因为目前body这个盒子的宽度不是由其内部的内容决定的，而是由浏览器窗口决定的，相关的原理本章后面还会深入分析。

图2 margin的范围

margin属性值的设置方法与padding-样，也可以设置不同的数值个数，代表相应的含义，这里就不再赘述了。

从直观上而言，margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表