Question

我见过很多人提到你不应该在CSS的同一个元素上使用宽度和填充或边距。那是为什么？

Answer 1

因为某些浏览器将宽度视为包含填充和边距的元素的总宽度，而其他浏览器将宽度视为添加填充和边距的基本宽度。因此，您的设计在不同浏览器中看起来会有所不同。

有关详细信息，请参阅W3C page on Box Model和quirksmode's take。

Answer 2

很多人仍然坚持IE浏览器中关于错误的盒子模型的概念，并且认为如果你开始搞乱元素宽度，填充和边距，你就会遇到麻烦。

这是非常过时的建议 - 假设您正在使用a correct doctype，所有相当现代的浏览器（包括IE6 +）都可以使用相同的盒子模型，并且您不应该有太多与之相关的问题。< / p>

这是CSS，你显然会有一百万个其他跨浏览器问题，但臭名昭着的IE盒子模式正在成为过去。

Answer 3

我从来没有遇到过一起使用宽度，填充和/或边距引起的问题。

只要你有一个有效的DOCTYPE且没有Quirks模式，你就会有一个可预测的盒子模型，因此应该使用最合适的边距/填充来表示你想要做的事情。

注意：保证金适用于边界之外，填充适用于边界内。宽度表示容器的内部宽度，总宽度=边距+边框+填充+宽度（记住左右两侧都添加了前三个）。

Answer 4

您是否声明填充和/或边距值不应与也分配了宽度值的DOM元素共存？如果是这样，那么只有当您不想编写与IE兼容的CSS以及实现Web标准的浏览器（例如Firefox）时才会这样。如果没有一些边距或填充值，通常很难实现您正在寻找的布局。但我建议您编写兼容两种浏览器的CSS。如果这不是您要求的，那么请纠正我：）

Answer 5

原因可能是着名的box model problem。

总结：IE渲染 width 与标准渲染不同，如果填充和边距与宽度或高度一起使用。

Answer 6

我可以想到两个原因：

1）IE的旧“盒子模型”真的很薄，所以当你有一个风格{width：300px;填充：30px; margin：20px;}它的轮廓可能实际上不匹配预期的400px（300 px大小，加上2 30px填充，加上2 20 px边距。我认为它的实际宽度将是340，因为它将填充滚动到宽度计算中

带来的是......

2）有些人发现计算有点令人困惑。

那就是说，我个人使用宽度以及填充和边距，并且没有任何问题。如果你在使用填充/边距时限制自己不使用宽度，这意味着你正在使用大量的非语义错误来编写代码。它确实意味着你必须要知道各种浏览器将如何处理元素，但这就是我们浏览的原因。

Answer 7

需要注意的一点是，它几乎不可能使用百分比宽度。以此为例，如果你希望你的“内容”div占据整个宽度，但是有一个10px的填充：

#content {
    width: 100%;
    padding: 0 10px;
}

这适用于（明智的，但不正确的）IE模型，但在符合标准的浏览器中，你的div将占用100％+ 20px的宽度，这是不好的。解决方案是使用另一个“内部”容器。

<div id="content">
    <div class="inner">
        content here.
    </div>
</div>

#content {
    width: 100%;
}
#content .inner {
    padding: 0 10px;
}

有额外的标记有点烦人，但从长远来看它会使很多事情变得容易。

不使用宽度和宽度填充/边距在同一元素上？

7 个答案: