Question

我正在建立一个网站，无法弄清楚这个额外的空白来自哪里。我尝试使用不同的填充和边距场景，但我无法让它工作。

body {
font-family: 'Open Sans', sans-serif;
margin-bottom: 1px;
}

最后几行html ..

        </ul>
      </div>
    </div>
  </div>
</body>

网站底部http://i.stack.imgur.com/GcOnL.png

的屏幕截图

不确定您还需要解决这个问题，请告诉我。我正在阅读，似乎有一些必须修复的设定保证金。

Answer 1

如果您尝试删除所有填充

html, body{
    padding: 0 !important;
    margin: 0 !important;
}

浏览器通常会自动添加此填充。

Answer 2

所有页面都有填充。要删除它，您可以在样式表中使用它：

* { // asterisk meaning 'all elements'
    padding: 0px;
    margin: 0px;
}

Answer 3

编辑：

问题来自于流程之外的#content div（因为它是浮点数），并且高度为100％，但由于它不在流量范围内，因此百分比指的是整个页面大小但不是这个容器。要解决这个问题，你需要给它与容器相同的高度（80％）：

#content div {
    float: left;
    height: 80%;
}

老答案：

我认为您的空白区域来自您的HTML代码。删除最后一个结束标记和结束标记之间的所有空格。

示例：

    </div>
</body>

=＆GT;

    </div></body>

Answer 4

尝试使用浏览器的属性检查器。只需右键单击网页的特定部分，然后单击“检查元素”（如果您在Google Chrome中）。 Firebug是一个Firefox / Safari / IE插件，工作方式相同。从检查器中，您可以打开/关闭CSS样式，并查看内容块背后的样式。记下css样式并在浏览器外编辑css文件。

网站底部的额外空白区域

4 个答案: