添加填充到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

它将变为220px宽。

在IE5或IE6（怪癖模式）下，它将是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，{{1} }和-ms-box-sizing以确保不同的浏览器都获取值。

此处有更多详情：http://www.quirksmode.org/css/box.html