我有疑问。假设我们有一个宽度为 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
最佳答案
它将变成 220px 宽。
在 IE5 或 IE6(怪癖模式)中,它将是 10px+180px+10px,但我不担心。
完整的故事可以在这里找到:http://www.quirksmode.org/css/box.html
关于html - 向 HTML 元素添加填充 - IE、FF、Chrome 等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3068672/