向 HTML 元素添加填充 - IE、FF、Chrome 等

Question

我有一个疑问。假设我们有一个宽度为 200px 的 div。如果我添加以下样式

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

元素到底发生了什么？ div的总宽度是否会增加到220px，左侧10px（用于左侧填充），原始宽度在中间200px，右侧10px（用于右侧填充）？

还是会从200px的padding空间变成(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 (quirks mode) 下，会是 10px+180px+10px，但我不会担心。

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

Answer 2

所有现代浏览器都符合 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