注：此系列的文章主要记录本人在使用Div+CSS布局重构网站的过程中遇到的一些问题，对于一些疑难问题也会有所解答，不会涉及任何的新技术。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
padding与margin是相对应的两个属性。简单来说，padding主内，表示内容到边界的距离；margin主外，表示边界到外层元素的距离。
还是实际操作一下比较好说明吧。
我们首先弄一个最外层的div，为了直观，给其加上边界：
<html>
<body>
<div id="div1" style='border:1px solid #000000; width:200px; height:180px;'>
<div>
</body>
</html>
页面如下图：
.gif)
给div1内层添加一个div，并给div1的样式添加padding属性：
<html>
<body>
<div id="div1" style='border:1px solid #000000; width:200px; height:180px; padding-left:40px;'>
<div id="div11" style='background-color:red; width:80px; height: 50px;'></div>
<div>
</body>
</html>
页面如下：
.gif)
给div1内层再添加一个div，并给这个div的样式添加margin属性：
<html>
<body>
<div id="div1" style='border:1px solid #000000; width:200px; height:180px; padding-left:40px;'>
<div id="div11" style='background-color:red; width:80px; height: 50px;'></div>
<div id="div12" style='background-color:green; width:70px; height:60px; margin-left:55px;'></div>
<div>
</body>
</html>
页面如下：
在Firefox里的页面显示是不一样的，这是由于Firefox跟IE对宽度的定义不一样，以后再说。
阅读(647) posted on 2009年12月4日 10:24