填充应用于#wrapper

Question

新手问题在这里。我有一个#wrapper作为我的主要容器。像这样：

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

我的问题是：现在包装器的实际宽度是多少？ 960px还是1000px？假设我想在#wrapper中有一个#header。我的#header的宽度应该是多少，假设我希望它是#wrapper的宽度？

Answer 1

示例中包装器的宽度现在为1000px。填充被添加到宽度，而Margin不是。

如果你在包装器中放置一个标题，你会希望它是1000px从一侧到另一侧完全伸展，但由于填充，这是不可能的，所以你的标题仍然必须是960px。

Heres a JSFiddle（抱歉，今天才发现这个！）

http://jsfiddle.net/wGYfR/8/

Answer 2

外部宽度为1000px，内部宽度为960px。因此，如果你想放入包装器，它应该有宽度＆lt; = 960px

Answer 3

包装仍然是960px。但是，你在两边都添加了20px的填充，这意味着两边都是20px，只有空白区域。可用面积现在是920px。

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

我建议firebug这会对你有所帮助。严重。

Answer 4

实际宽度仍为1000px。您可以在#wrapper上设置背景颜色，以查看宽度仍为1000px。

CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png

Answer 5

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

Answer 6

宽度应为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;
}