包括div大小的填充

Question

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

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

如何计算宽度计算中的填充，或者是否有一个变通方法可以使两个大小相等但填充div？

小提琴：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/

Alos注意，Firefox中需要-moz-前缀。 IE从第8版开始支持此属性。