html - 在 div 的大小中包含填充

Question

这是一张图片来解释我的问题:

当 width: 50%; 完成时，我需要考虑填充。如果我不这样做，第一个 div 的宽度实际上将是 50% + 2em，因为没有考虑填充。

我如何计算宽度计算中的填充，或者是否有两个大小相等但填充的 div 的解决方法？

fiddle :http://jsfiddle.net/sMuCY/

测试代码:

<div style="padding:1em;float:left;width:50%;background-color:#faa">
    This div has 50% width, 1em padding, float left
</div>
<div style="background-color:#0f0;padding:1em">
    This is a div with 1em padding
</div>

<hr>

<div style="float:left;width:50%;background-color:#faa">
    This div has 50% width and float left
</div>
<div style="background-color:#0f0">
    This is a normal div
</div>

Answer 1

您可以使用 box-sizing 属性来更改盒子模型的默认行为:

div {box-sizing: border-box;}

Demo

另一个测试差异的演示:http://jsfiddle.net/sMuCY/2/

阅读:http://css-tricks.com/box-sizing/

另外请注意，-moz- 前缀在 Firefox 中是必需的。 IE 从第 8 版开始支持此属性。