测试代码如下:

[codesyntax lang="css"]

<style>
body {
  background: gray;
}
#box {
  width: 200px; height: 200px;
  border: 3px solid #000;
  margin: 20px;  padding: 20px;
  background: #5C5C2C;
  float: left;
}
#in {
  background: yellow;
}
#box1 {
  margin: 20px;
  width: 200px; height: 200px;
  background: yellow;
  float: left;
}
</style>

[/codesyntax]

[codesyntax lang="html4strict"]

<div id="box"><div id="in">content</div></div>
<div id="box1"></div>
<div style="clear: both;"></div>
<div id="box1"></div>

[/codesyntax]

结果截图:

IE:

FF:

结果:

其实很简单,看截图就可以知道了,IE下的Padding是不会改变div的整体大小的,如果设定为200X200那么即使设定了Padding还是200X200。但是FF下就不同了,FF下会将div中真正的内容部分设为200X200,而Padding和Border则是另外加上去的,结果就是真正的长宽为223X223而不是200X200。

这点必须注意,如果想克服这个问题的话就把要设Padding的div包在另外一个设过长和宽大小固定的div里,就可以解决这个问题。

P.S. 测试浏览器版本我已经忘记了,没错的话应该是IE7和FF3