在HTML元素（IE，FF，Chrome等）中添加填充

Question

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

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

對元素實際發生了什么？ div的總寬度是否會增加到220像素，左邊為10像素（用於左側填充），原始寬度為200像素，中間為10像素（右側填充）？

還是會從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

它將變為220px寬。

在IE5或IE6（怪癖模式）下，它將為10px + 180px + 10px，但是我不必擔心。

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

Answer 2

所有現代瀏覽器均符合W3C盒式模型。 有關詳細信息，請參見此處 。 下圖顯示了如何計算盒子的整體尺寸：

本質上，盒子的尺寸是width + padding + border 。 盡管可能會影響框的位置，但沒有將邊距添加到寬度中。

菲利普（Philippe）對IE5的包裝盒模型不正確是正確的。

如果您想更改Box模型的工作方式，則可以使用box-sizing CSS3屬性，盡管在此階段，您還必須使用-webkit-box-sizing ， -ms-box-sizing和-moz-box-sizing來確保所有不同的瀏覽器都能獲取該值。

此處有更多詳細信息： http : //www.quirksmode.org/css/box.html