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

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

html css

添加填充到HTML元素-IE、FF、Chrome等,html,css,Html,Css,我有点怀疑。让我们考虑一下，我们有一个宽度为20px的div。如果我在样式中添加以下内容 style="padding-left:10px; padding-right:10px" 对于元素，实际发生了什么？div的总宽度是否会增加到220px，左侧为10px（用于左填充），中间为200px，右侧为10px（用于右填充）或者它会从200px占用填充空间并变成（10px+180px+10px）每个浏览器（尤其是IE和FF）的上述渲染是否不同更新 <div style="width:1

我有点怀疑。让我们考虑一下，我们有一个宽度为20px的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将变为220像素宽

在IE5或IE6（怪癖模式）中，它将是10px+180px+10px，但我不会为此担心

完整的故事可以在这里找到：

它将变为220像素宽

在IE5或IE6（怪癖模式）中，它将是10px+180px+10px，但我不会为此担心

完整的故事可以在这里找到：

所有现代浏览器都符合W3C box模型。有关详细信息，请参阅。下面是一张图表，展示了如何计算盒子的总体尺寸：

基本上，方框的尺寸是

宽度

填充

边框

。边距不会添加到宽度中，尽管它可能会影响长方体的位置

Philippe对IE5的看法是正确的，它有一个坏盒子模型

如果您想改变盒子模型的工作方式，可以使用

盒子大小调整

CSS3属性，不过在这个阶段，您还必须使用

-webkit盒子大小调整

，

-ms盒子大小调整

和

-moz盒子大小调整

，以确保不同的浏览器都能选择该值

这里有更多详细信息：