添加填充到HTML元素 - IE，FF，Chrome等

Question

我有疑問。讓我們考慮我們有一個寬度爲200px的div。如果我添加以下樣式

style="padding-left:10px; padding-right:10px" 

到元素實際上會發生什麼？將div的總寬度增加到220px，左邊是10px（左邊填充），中間是原始寬度200px，右邊是10px（右邊填充）？

或者它會從200px的填充空間，併成爲（10px + 180px + 10px）？

上述渲染對於每個瀏覽器（特別是IE和FF）有所不同嗎？

更新

<div style="width:180x">  
<div style="width: 180px;background-color: #4E81BD;text-align: left;padding-left: 5px;padding-right: 5px;"> 
    <a class="anchor-tag" href="Javascript:;"><span style="font-family: Calibri,Tahoma,Verdana;font-weight: 500; color: white">Rasu</span></a> 
</div> 
<div style="width: 180px;height: 270px;border: 1px solid #4E81BD;padding: 5px;overflow-y: auto;overflow-x: hidden;"> 
    <div style="border: 1px solid #DADADA;height: 150px;overflow-x: hidden;overflow-y: auto;text-align: left;font-family: Calibri;"> 
    </div> 
    <div style="height: 10px;"> 
    </div> 
    <div style="height: 75px;border: 1px solid #DADADA;"> 
     <textarea>[Type your message here]</textarea> 
    </div> 
</div> 
</div> 

謝謝

NLV

Answer 1

所有現代瀏覽器都符合W3C盒模型。詳情請參閱here。這裏有一個圖演示瞭如何一箱的整體尺寸計算：

基本上是一個盒子的尺寸width + padding + border。邊距不會加到寬度上，儘管它可能會影響盒子的位置。

Philippe對IE5是正確的，IE5有一個破箱模型。

如果你想改變框模型的工作方式，你可以使用box-sizing CSS3屬性，但在這個階段，你必須也使用-webkit-box-sizing，-ms-box-sizing和-moz-box-sizing，以確保不同的瀏覽器都挑提高價值。

更多細節在這裏：http://www.quirksmode.org/css/box.html

Answer 2

它將成爲220px寬。

在IE5或IE6（quirks模式）中，它將是10px + 180px + 10px，但我不擔心這一點。

完整的故事可以在這裏找到：http://www.quirksmode.org/css/box.html