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

解决方案

回答

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

有关更多信息，请参见Box模型上的W3C页面和quirksmode的用法。

回答

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

只要我们具有有效的DOCTYPE且未处于Quirks模式，我们就将具有可预测的框模型，因此应使用余量/填充中最合适的那个来表示我们要执行的操作。

笔记：
边距适用于边界外，填充适用于边界内。
宽度表示容器的内部宽度，总宽度=边距+边框+边距+宽度(请记住，左侧和右侧都添加了前三个)。

回答

我们是否在说明填充和/或者边距值不应与也为其分配了宽度值的DOM元素共存？如果是这样，仅当我们不想编写与IE以及实现Web标准的浏览器(例如Firefox)兼容的CSS时，这才是正确的。如果没有一些边距或者填充值，通常很难实现所需的布局。但是我建议我们编写对两种浏览器都兼容的CSS。如果这不是我们要的内容，请纠正我:)

回答

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

摘要：如果将padding和margin与width或者height一起使用，则IE渲染的宽度与标准渲染不同。

回答

我可以想到2个原因：

1)IE的旧"框模型"确实很脆弱，因此当我们使用样式{width：300px;内边距：30px; margin：20px;}它的轮廓可能实际上不符合预期的400px(300 px大小，加上2个30px的填充，再加上2个20 px的空白。我认为它的实际宽度为340，因为它将填充填充到宽度计算中。

带来的是...

2)有些人发现计算有些混乱。

就是说，我个人使用宽度以及边距和边距，对此没有任何问题。如果我们限制自己在使用填充/边距时不使用宽度，则意味着代码充满了很多非语义的内容。这确实意味着我们必须知道各种浏览器将如何处理该元素，但这就是我们进行浏览器测试的原因。

回答

许多人仍然坚持关于IE中错误的箱模型的概念，并认为如果我们开始弄乱元素的宽度，填充和边距，就会遇到麻烦。

假设我们使用的是正确的doctype，这是非常过时的建议，所有相当现代的浏览器(包括IE6 +)都可以在相同的盒子模型上运行，并且我们实际上不应该有太多与其相关的问题。

作为CSS，我们显然还会遇到一百万个其他跨浏览器问题，但臭名昭著的IE盒模型已成为过去。

回答

需要注意的重要一点是，它几乎不可能使用百分比宽度。以这个为例，如果我们想让"内容" 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;
}

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