Question

关于CSS里padding和width的问题。

写了一年的php+html了，第一次碰到这种情况，求解答。
我的一个div的css样式为：width:370px; padding:5px; margin:10px 10px 0 10px;
按道理这个div的宽度应该是 10+5+370+5+10 （为400px）
但是我在浏览器里除了IE6为400外，其他的全为390了。第一碰到，求解！！！
没人理解？margin我知道不占在div内，padding算填充。
但是它的宽度还在，这都看不懂吗？ 复制的也别来了。
满意的加分

Answer 1

在一个block元素上使用padding后元素实际的宽度会增加，这是一个常识。
这本来是一个很浅显的道理，但许多初学者考虑的时候却觉得很怪异。
我这里按自己的解释来说明一番。
给个假设情况：一个width：10px的元素，padding：10px；
那么实际宽度就是width+padding-left+padding-right=30px;
假如说padding对宽度无影响，那么width是10px；但是padding在横向的宽度是20px；这样内边距padding>总宽width。
一个元素的内边距却大于这个元素的总宽，显然这是个悖论。
所以说作为内边距的padding是一定要加在宽度之上的。
+不同的DOCTYPE 声明造成width的含义有所不同。
来源：http://cssass.com/blog/2009/119.html/comment-page-1

Answer 2

是否写了：
box-sizing:border-box

看你的截图，实际内容宽度是360px，所以猜测是哪里定义了box-sizing
不过不知道ie7是什么现象，只能是猜测。

追问

没有的，代码都在这了。没有添加其他的东西。我也是第一次碰到。旁边的div也是一样的，但padding占阁正常

追答

无代码这么猜测的话，实在没法弄。
你把这段代码单独保存一个html，是否是正常的呢？