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

Question

我见过很多人提到你不应该在CSS中使用宽度和填充或边距。这是为什么？

Answer 1

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

欲了解更多信息，请参阅W3C page on Box Model和quirksmode's take。

Answer 2

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

只要你有一个有效的DOCTYPE，并且不在怪癖模式下，你将有一个可预测的盒子模型，因此应该使用边缘/填充中最适合的代表你正在尝试做的事情。

注意： 边界应用于边界之外，填充应用于边界内。宽度意味着容器的内部宽度，总宽度=边距+边框+填充+宽度（记住前三个是为左侧和右侧添加的）。

Answer 3

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

Answer 4

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

总结：IE呈现宽度不同，那么标准呈现如果填充和边缘具宽度或高度使用。

Answer 5

我能想到的原因有二：

1）旧的“盒模型”的IE浏览器确实是片状的，所以当你与风格{宽度的元素：300像素;填充：30px; margin：20px;}它的轮廓可能实际上并不匹配达到预期的400像素（300像素大小，加上2 30像素填充，加上2 20像素边距，我认为它的实际宽度将是340，因为它将填充滚动到宽度计算中。

带来是...

2）有些人发现的计算有点混乱。

这就是说，我个人使用宽度以及填充和边距，并且没有问题。如果限制自己在使用填充/边距时不使用宽度，这意味着您正在使用大量非语义方式来处理代码。它的确意味着你必须意识到各种浏览器会对这个元素做什么，但这就是我们为什么要浏览它的原因。

Answer 6

很多人仍然坚持关于IE中错误盒子模型的观点，并认为如果你开始搞乱元素宽度，填充和边距，你将会陷入困境。

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

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

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

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