Css 应用于#包装器的填充

这里是新手问题。我的主要容器是一个包装纸。像这样：

#wrapper {
  margin: 0 auto;
  padding: 0 20px;
  width: 960px;
  height: 100px;
}

---

我的问题是：现在包装的实际宽度是多少？960像素还是1000像素？比如说，我想在包装器中有一个标题。假设我希望标题的宽度是包装的宽度，那么标题的宽度应该是多少

在您的示例中，包装的宽度现在是1000px。填充添加到宽度，而边距不添加

如果你把一个头放在包装器里面，你会希望它是1000px，完全从一边伸展到另一边，但这是不可能的，因为有填充，所以你的头仍然必须是960px

这是一个JSFIDLE（抱歉，今天才发现！）

---

在您的示例中，包装的宽度现在是1000px。填充添加到宽度，而边距不添加

如果你把一个头放在包装器里面，你会希望它是1000px，完全从一边伸展到另一边，但这是不可能的，因为有填充，所以你的头仍然必须是960px

这是一个JSFIDLE（抱歉，今天才发现！）

---

实际宽度仍然是1000px。您可以在#包装上设置背景色，以确保宽度仍为1000px

---

实际宽度仍然是1000px。您可以在#包装上设置背景色，以确保宽度仍为1000px

---

外部宽度为1000px，内部宽度为960px。因此，如果你想把它放在包装内，它的宽度应该是，外部宽度是1000px，内部宽度是960px。因此，如果您想将其放入包装器中，则包装器的宽度应为960px。但是，您已经在两侧添加了20px的填充，这意味着对于两侧的20px，只有空白。可用面积现在是920px

您不必设置标题的宽度。如果不这样做，它将填充整个包装器元素（减去填充）。您的标题最终将是920px

---

我建议这对你会有很大帮助。说真的。

包装器仍然是960px。但是，您已经在两侧添加了20px的填充，这意味着对于两侧的20px，只有空白。可用面积现在是920px

您不必设置标题的宽度。如果不这样做，它将填充整个包装器元素（减去填充）。您的标题最终将是920px

---

我建议这对你会有很大帮助。严肃地说。

如果你使用Chrome或Safari（或Firefox上的firebug），你可以很容易地检查元素的宽度，以及填充和边距对它的影响

---

如果您使用Chrome或Safari（或Firefox上的firebug），您可以轻松查看元素的宽度，以及填充和边距对元素的影响

---

宽度应为960px，但只有FireFox在宽度上添加了填充。 要解决此问题，请将以下代码放在代码的顶部（或至少所有div选择器的上方）：

DIV {   /*let Firefox stick to the web standard concerning padding*/
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

---

宽度应该是960px，但是只有FireFox在宽度上添加了填充。 要解决此问题，请将以下代码放在代码的顶部（或至少所有div选择器的上方）：

DIV {   /*let Firefox stick to the web standard concerning padding*/
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

---

我认为这幅插图很有帮助，所以我把它放在imageshack上，并将其插入到帖子中。如果您不喜欢更改，可以回滚修订版。谢谢，我忘了嵌入它了！我认为这幅插图很有帮助，所以我把它放在imageshack上，并将其插入到帖子中。如果您不喜欢更改，可以回滚修订版。谢谢，我忘了嵌入它了！抱歉，这是不正确的，可用宽度仍然是960，总宽度是1000（宽度+填充）。现代浏览器通常以相同的方式解释事物，这并不意味着它的工作方式完全有意义，但它仍然是它的工作方式！抱歉，这是不正确的，可用宽度仍然是960，总宽度是1000（宽度+填充）。现代浏览器通常以相同的方式解释事物，这并不意味着它的工作方式完全有意义，但它仍然是它的工作方式！因此，如果我想在#包装器内有一个白色边框，同时保持960px的宽度，那么我应该这样做：#包装器{边距：0自动：填充：0；宽度：960px；高度：100px；}#标题{边距：0 20px；填充：0；宽度：940px；高度：10；}正确吗？是的，我认为这可以。但是你为什么不自己试试，用firebug检查结果呢？所以如果我想在#包装内有一个白色边框，同时保持960px的宽度，那么我应该这样做：#包装{边距：0自动：填充：0；宽度：960px；高度：100px；}标题{边距：0 20px；填充：0；宽度：940px；高度：10；}正确吗，我想这会管用的。但是你为什么不自己试试，然后用firebug检查结果呢？