填充应用于#wrapper

时间:2011-03-30 16:21:58

标签: css

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

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

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

6 个答案:

答案 0 :(得分:2)

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

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

Heres a JSFiddle(抱歉,今天才发现这个!)

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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

http://img845.imageshack.us/img845/5139/screenshot20110330at630.png

答案 5 :(得分: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;
}