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

Question

这是解释我的问题的图像：

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

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

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

演示

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

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

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