包含在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;} 

Demo

另一个演示测试区别：http://jsfiddle.net/sMuCY/2/

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

阿洛斯注，即-moz- preffix在Firefox的需要。 IE从第8版开始支持这个属性。