不在同一元素上使用宽度、内边距和外边距？

Question

我看到很多人提到在CSS中不应该在同一个元素上同时使用宽度、内边距和外边距。为什么呢？

- davethegr8

Answer 1

因为一些浏览器将宽度视为包括填充和边距的元素总宽度，而其他浏览器将宽度视为基础宽度，填充和边距会添加到该宽度上。结果是你的设计在不同的浏览器中看起来不同。

欲了解更多信息，请参见 W3C关于框模型的页面 和 quirksmode的解释。

- Stephen Deken

---

你有一些示例链接吗？我很好奇它实际上如何影响事情。 - davethegr8

请参见上文。此外，这篇文章还有另一份详细的分析。 - Stephen Deken

哎呀，无法在注释中使用 Markdown。 - Stephen Deken

Answer 2

很多人仍然坚持关于IE中有缺陷的盒子模型的观念，并认为如果你开始调整元素的宽度、填充和边距，你会遇到麻烦。这是相当过时的建议 - 假设你使用了正确的文档类型，所有比较现代的浏览器（包括IE6+）都将按照相同的盒子模型工作，你不应该真正遇到太多与之相关的问题。由于这是CSS，你显然会有许多其他跨浏览器的问题，但臭名昭著的IE盒子模型正在成为过去的事情。

- David Heggie

---

我显然指的是所有现代浏览器，而不是所有浏览器。IE4等旧版本浏览器可能不会注意你的DOCTYPE声明。但如果你的目标是IE4，那么你可能要回到1997年了。 - David Heggie

Answer 3

我从未遇到过使用宽度、内边距和/或外边距同时使用会引起问题的情况。

只要你有一个有效的 DOCTYPE 并且不处于 Quirks 模式中，你将拥有可预测的盒模型，因此应该根据需要选择使用 margin/padding 来表示你想要做的事情。

注意： margin 应用于边框之外，padding 应用于边框之内。 Width 指容器的内部宽度，总宽度 = margin+border+padding+width（记住前三个是左右两侧都要加）。

- Peter Boughton

---

Quirks模式是由DOCTYPE触发的，只要您的DOCTYPE比HTML 4.01 Transitional更好，并且文件中的绝对第一行应该是标准模式。 - Eric DeLabar

说“Quirks模式是由DOCTYPE触发的”有点不准确。所有浏览器都会在缺少DOCTYPE时进入Quirks模式。使用错误的DOCTYPE也会使浏览器进入Quirks模式，但“错误”的定义因浏览器而异。使用Strict DOCTYPE是最佳选择。 - Peter Boughton

Answer 4

一个重要的注意点是，它几乎让使用百分比宽度变得不可能。举个例子，如果你想让你的“内容”div占据整个宽度，但是有10像素的填充：

#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;
}

虽然有额外的标记有点烦人，但从长远来看，它可以让很多事情变得更容易。

- nickf

Answer 5

你是否在说，在分配了宽度值的DOM元素中不应该同时存在填充和/或边距值？如果是这样，那只有在您不想编写与IE以及实现Web标准的浏览器（例如Firefox）兼容的CSS时才成立。通常很难实现您正在查找的布局而没有一些边距或填充值。但我建议您编写适用于两种浏览器的CSS。如果这不是您要问的，请纠正我 :)

- Chris Serra

Answer 6

可能的原因是著名的盒模型问题。

总结：如果在宽度或高度上使用填充和边距，IE会以不同于标准渲染的方式呈现宽度。

- spinodal

---

盒模型问题已经在七年前被解决了。除非你要支持Internet Explorer 5.x，否则这并不是一个好的理由，即便如此，还有更好的方法可以解决。 - Jim

Answer 7

我可以想到两个原因：

1）IE的旧“盒子模型”非常薄弱，所以当您拥有一个样式为{width: 300px; padding: 30px; margin: 20px;}的元素时，它的轮廓可能实际上不符合预期的400px（300像素大小，加上2个30像素的填充，加上2个20像素的边距）。我认为它的实际宽度将是340，因为它会将填充项合并到宽度计算中。

这就带我们来到第二个原因...

2）有些人会觉得这些计算有点令人困惑。

话虽如此，我个人使用宽度以及填充和边距，并没有任何问题。如果您在使用填充/边距时限制自己不使用宽度，那意味着您的代码中会有很多非语义化的垃圾。这确实意味着您必须了解各种浏览器对元素的处理方式，但这就是为什么我们需要进行浏览器测试的原因。

- Jonathan Arkell