我的页面顶部有大约 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>
在您的网站样式表顶部添加一个 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 提到您可以使用通用选择器：*而不是列出所有元素，并且此选择器看起来在所有主要浏览器中都是跨浏览器兼容的：
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
如果以上没有任何帮助，请检查是否margin-top在某些（以下某些级别）嵌套的 DOM 元素上设置了。
body当您在调试器中检查元素本身时，它将无法识别。只有当您在 Chrome 开发工具元素调试器中展开嵌套在元素body中的多个元素并检查其中是否有一个带有margin-topset的元素时，它才会可见。
下面是网站屏幕截图的上半部分和检查body标签时对应的 Chrome 开发工具视图。
这里没有上边距的迹象，您已经按照上面的答案重置了所有浏览器特定的 CSS 属性，但不需要的空白仍然在这里。
以下是检查右侧嵌套元素时的视图。可以清楚地看到上面的橙色top-margin。这是导致body元素顶部空白的原因。
如果您需要在其上方有空间但又不会在标签上方泄漏它，则在找到的元素上替换margin-top为。padding-topbody
希望有帮助:)
老问题，但我刚刚遇到了这个问题。有时您的文件是 UTF-8 开头的 BOM，而您的模板引擎不喜欢这样。因此，当您包含模板时，您会在页面中插入另一个（不可见的）BOM...
<body>{INVISIBLE BOM HERE}...</body>
这会导致页面开头出现空白，浏览器在此处呈现 BOM，但它看起来对您不可见（在检查器中，仅显示为空格/引号。
将模板文件保存为不带 BOM 的 UTF-8，或更改模板引擎以正确处理 UTF8/BOM 文档。
除了 css 重置之外，我还在div容器的 css 中添加了以下内容并修复了它。
position: relative;
top: -22px;
尝试这个
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
这个特定的答案表明 h1 元素有一个隐含的 margin-top 可能导致空白
https://stackoverflow.com/a/20021854/2129219
删除它的建议是有帮助的，而且肯定会让人大开眼界这是如何发生的
h1 { margin-top: 0; }
如上所述，您获得空白可能有很多原因。假设如果您有带有 HTML实体的空 div 元素也会导致错误。
例子
<div class="sample"> </div>
删除 HTML 实体
<div class="sample"></div>
overflow: auto在标签上使用<body>是一种更清洁的解决方案，并且会产生魅力。
检查是否有任何 webkit 样式应用于 ul、h4 等元素。对我来说，这是造成这种情况之前和之后的边距。
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
我只是把 CSS 放在我<div>现在正在使用的代码中
position: relative; top: -22px;