 margin指的是元素与元素之间的距离，观察上节的图1，可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并投有紧贴着浏览器窗口的边框。这是因为body本身也是一个盒子，在默认情况下．body会有一个若干像素的margin，具体数值各个浏览器不尽相同。因此在body中的其他盒子，就不会紧贴着浏览器窗口的边框了。为了验证这一点，可以给body这个盒子也加一个边框，代码如下。
在body设置了边框和背景色以后，效果如图1所示。可以看到，在细黑线外面的部分，就是body的margin。lodidance.com  图1 margin的效果 注意：body是一个特殊的盒子．它的背景色会延伸到mragin的部分，而其他盒子的背量色只会覆盖“padding+内容”部分（IE浏览器中），或者“border+padding+内容”部分(Firefox浏览器中)。 下面如果再给div盒子的margin增加20像素，效果如图2所示。可以看到div的粗边框与body的细边框之间的20像素距离就是margin的范围。右侧的距离很大，这是因为目前body这个盒子的宽度不是由其内部的内容决定的，而是由浏览器窗口决定的，相关的原理本章后面还会深入分析。  图2 margin的范围 margin属性值的设置方法与padding-样，也可以设置不同的数值个数，代表相应的含义，这里就不再赘述了。 从直观上而言，margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/669.html |
