【问题标题】：White space at top of page页面顶部的空白
【发布时间】：2013-09-17 07:19:53
【问题描述】：

我的页面顶部有大约 20 像素的空白区域。我已经检查了每个元素，并且该区域没有任何填充或边距。当我检查 body 元素时，它不包括这个空间。当我检查 html 元素时确实包含这个空间。另外，如果我删除

<!DOCTYPE html>

空白消失了。

这是我的主要布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @RenderSection("Css", false)
</head>

<body>
    @RenderSection("JavaScript", false)
</body>
</html>

【问题讨论】：

请发送输出html（查看页面源（Chrome））
任何特定的浏览器？
Chrome 是我使用的浏览器。我在这里转储了html。很抱歉格式不好docs.google.com/document/d/…
问题也在 IE 10 和 FF 中

标签： html css asp.net-mvc-4 razor

【解决方案1】：

在您的网站样式表顶部添加一个 css 重置，不同的浏览器会呈现一些默认边距和填充，也许外部样式表也会做一些您不知道的事情，可以这么说，一个 css 重置只会初始化一个新的调色板：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

更新：改用通用选择器： @Frank 提到可以使用通用选择器：*，而不是列出所有元素，而这个选择器看起来就像是 cross browser compatible in all major browsers：

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

【讨论】：

这会让空白消失
使用 * 选择所有元素可以达到同样的效果。像* { css } 这样您就不必列出每个元素。
@Frank，谢谢我用你的推荐更新了我的答案，很好！
老实说，使用 * 作为选择器并不是一个好主意。您要求浏览器将样式添加到不需要的东西，例如
好吧，至少选择器有两种选择，希望人们在做出最终决定之前阅读他的回答。

【解决方案2】：

如果以上没有任何帮助，请检查是否在某些（以下某些级别）嵌套的 DOM 元素上设置了 margin-top。

当您在调试器中检查body 元素本身时，它将无法识别。只有在 Chrome 开发工具元素调试器中展开嵌套在 body 元素中 down 的几个元素并检查其中是否有一个设置了 margin-top 时，它才会可见。

当您检查 body 标记时，下面是站点屏幕截图的上部和相应的 Chrome 开发工具视图。

这里没有上边距的迹象，您已经按照上面的答案重置了所有浏览器特定的 CSS 属性，但不需要的空白仍然在这里。

以下是检查右嵌套元素时的视图。可以清楚地看到橙色的top-margin 设置在上面。这是导致body 元素顶部出现空白的原因。

在找到的元素上，如果您需要在其上方留出空间，但不要在 body 标记上方泄漏它，请将 margin-top 替换为 padding-top。

希望有帮助:)

【讨论】：

【解决方案3】：

老问题，但我刚刚遇到了这个问题。有时您的文件是 UTF-8 开头的 BOM，而您的模板引擎不喜欢这样。因此，当您包含模板时，您会在页面中插入另一个（不可见的）BOM...

<body>{INVISIBLE BOM HERE}...</body>

这会导致页面开头出现空白，浏览器在此处呈现 BOM，但它看起来对您不可见（在检查器中，仅显示为空格/引号。

将您的模板文件保存为不带 BOM 的 UTF-8，或更改您的模板引擎以正确处理 UTF8/BOM 文档。

【讨论】：

【解决方案4】：

除了 css 重置之外，我还在 div 容器的 css 中添加了以下内容并修复了它。

position: relative;
top: -22px;

【讨论】：

【解决方案5】：

试试这个

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

【讨论】：

height:100% 在 Chrome 上为我生成滚动条。
@cyrf 只需添加带有边框值的 box-sizing 属性，例如box-sizing: 边框框；

【解决方案6】：

这个特定的答案表明 h1 元素有一个隐含的 margin-top 可能导致空白

https://stackoverflow.com/a/20021854/2129219

删除它的建议很有帮助，当然也让我们大开眼界

h1 { margin-top: 0; }

【讨论】：

天哪，我花了一个小时来解决这个问题，谢谢伙计！

【解决方案7】：

如上所述，您获得空白的原因可能有很多。假设如果您有 HTML Entities 的空 div 元素也会导致错误。
示例

<div class="sample">&nbsp;</div>

删除 HTML 实体

<div class="sample"></div>

【讨论】：

【解决方案8】：

溢出：自动

在<body> 标签上使用overflow: auto 是一种更简洁的解决方案，而且会很有魅力。

【讨论】：

【解决方案9】：

检查是否有任何 webkit 样式应用于 ul、h4 等元素。对我来说，这是造成这种情况之前和之后的边距。

-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;

【讨论】：

【解决方案10】：

我只是将 CSS 放在我的 <div> 中，现在可以在代码中使用

position: relative; top: -22px;

【讨论】：