顶部和内部div标签内的空白

Question

有人可以告诉我，我的对不起，愚蠢的眼睛丢失了吗？

空格出现在浏览器窗口的顶部，以及两个div标签容器（所有浏览器）之间。

p，body，html，每个div，所有边距：0px;

格拉西亚斯。

Answer 1

menu-container div的上边距margin-top: 20px;我看到了使用FireBug。

Answer 2

从margin-top: 20px;移除<div class="menucontainer">并将padding-top: 20px;置于<div class="lightsandcolorscontainer">

理由是，因为它是最顶级的容器，它的margin-top放在父容器上，我确信有一个W3C doc，为什么会这样，但就是这样。如果你想移动一些容器的顶部元素，你需要在它的父元素上使用填充。

Answer 3

.menucontainer有margin-top: 20px;

设置为margin-top: 0;

.centercontainer有margin: 10px auto;

设置为margin: 0 auto;

并添加overflow: hidden;（至.centercontainer）

Chrome中的开发者工具是一个巨大的帮助，Firefox中的Firebug也是如此：）

编辑：如果您希望.menucontainer低20 px，请将padding-top: 20px;添加到.lightsandcolourcontainer

此外，您的内容宽度设置为1000px - 请注意此宽度，因为您只允许24px用于水平滚动条，这可能会在某些浏览器中出现丑陋且不必要的垂直滚动条的副作用。坚持960px - 980px最大页面宽度是一种网络标准，用于防止垂直滚动出现在大多数访问者的浏览器上（因为1024 x 768是访问者监视器中最流行的分辨率）。