包含在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版開始支持這個屬性。