溢出：自动

Question

我页面顶部有大约20像素的空白区域。我检查了每个元素，这个区域没有任何填充或边距。当我检查身体元素时，它不包括这个空间。当我检查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>

Answer 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;
    }

Answer 2

试试这个

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

Answer 3

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

position: relative;
top: -22px;

Answer 4

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

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

这会导致页面开始处出现间隙，浏览器会在其中呈现BOM，但它看起来不可见（在检查器中，只显示为空格/引号。

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

Answer 5

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

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

删除HTML实体

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

Answer 6

检查是否有任何webkit样式应用于ul，h4等元素。对于我来说，它是在之前和之后的margin。

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

Answer 7

如果上述方法均无济于事，请检查嵌套的DOM元素中的某些（在某些级别以下）是否设置了margin-top。

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

以下是您查看body标记时网站屏幕截图的顶部和相应的Chrome Dev Tools视图。

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

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

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

希望有帮助：）

Answer 8

溢出：自动

在overflow: auto标签上使用<body>是一种更干净的解决方案，并且会很吸引人。

Answer 9

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

position: relative; top: -22px;

页面顶部的空白区域

9 个答案:

溢出：自动