首先来看下盒子模型:
#box{
width:300px;
height:200px;
margin:10px;
border:1px solid #000;
padding:10px;
}
结果如图:
黄色部分为10px的外补白,蓝色部分为10px的内补白。事实上id为box的容器实际占用的空间为342px的宽和242px的高,里面300*200px是content区域,也就是您的内容将放在这个区域内。这就是盒子模型。
为什么用margin?
外补白,也可以理解为“和某某的距离是多少”,理论上margin和padding都是在页面上增加空白区域,margin的空白在盒子外部,使两个盒子之间产生距离;而padding是在盒子内部增加空白。涉及到border和背景图片的时候区别非常明显:
两个盒子宽度200px(包括边框),a和b两个div之间有10px的距离,黑色1像素边框,里面的内容和边框有10px的距离:
#a,#b{
width:178px;
berder:1px solid #000;
padding:10px;
}
这里,要把“两个div之间有10px的距离”表现出来,就必须用到margin
#a{margin-bottom:10px;} /* a下面补10px的空白 */
PS:这里为什么在a下面补空白而不是在b上写margin-top:10px呢?原因很简单:在a下面补10px的空白,无论a下面放的是什么东西,它总是和a有10px的距离,从而避免a下面的内容改变的时候大量修改样式。比如,a下面可能有很多盒子,b、c、d、e...如果我把b去掉,后面的盒子就往上挤,如果我把margin-top写在b上,b去掉以后我还要重新给c加一个margin-top才能达到想要的效果。
事实上这种结构的html外面应该放一个容器来固定宽度,里面无论怎么变化,都不用去计算它的宽度:
<div style="width:200px;省略...">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
背景图片和padding
事实上背景图片是在padding区域开始显示的:
如图,上面一整张是背景图片,我要在“动画·音乐”的右边打上文字:
假设文档结构是这样:
<div id="box>
<ul id="hot">
<li>黑执事II5</li>
<li>会长是女仆大人18</li>
<li>尸鬼4</li>
</ul>
</div>
背景图片在box上
#box{
/* 其他省略 */
}
在没有样式的时候,文字是这样的:(假设文字的行距为1.5em,所以文字并不是贴在容器的顶部)
这个时候有两个办法把右边的文字放到合适的位置,假设文字与最左边距离为120px:
1. 对box使用左边内补白:
#box{
background:url("img/bg.png") no-repeat;
padding-left:120px;
/* 其他省略 */
/* 容器有宽度的时候,width应该改为原来的宽度减120px */
}
虽然使用了120px的内补白,但是背景图片的位置还是不变的,也就是说背景图片是在padding区域开始显示的。
1. 对ul使用左边外补白:
#box{
background:url("img/bg.png") no-repeat;
/* 其他省略 */
}
#hot{
margin-left:120px;
/* 其他省略 */
}
我个人倾向于第一种,理由和上面的例子一样,无论我在div里放什么内容,它们总是距离容器左边120px处开始显示,不会盖在“动画·音乐”上,假如用第2种方法,当我改变div里的内容时,必须重新调整显示位置,增加维护的工作量。
所以,什么时候用margin,什么时候用padding,需要根据页面的设计思路和实际情况来判断,选择代码做简洁、结构最合理、最容易维护的方式来使用。