margin 和padding有什么区别？

首先来看下盒子模型：

#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{

background:url("img/bg.png") no-repeat;

/* 其他省略 */

}

在没有样式的时候，文字是这样的：（假设文字的行距为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，需要根据页面的设计思路和实际情况来判断，选择代码做简洁、结构最合理、最容易维护的方式来使用。