页面顶部的空白区域

Question

页面顶部的空白区域

69

我在页面顶部有大约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>

- dan_vitch

4

请发送输出的HTML代码（在Chrome浏览器中查看页面源代码）。 - Yair Nevet

有特定的浏览器吗？ - Boaz

Chrome是我正在使用的浏览器。我把HTML倒在这里了。对于糟糕的格式化我感到抱歉。 - dan_vitch

问题也存在于IE 10和FF中。 - dan_vitch

13个回答

18

如果其它答案都没有帮助，检查下面几个级别嵌套的DOM元素是否设置了margin-top。

在调试器中检查body元素本身时，它不可识别。只有当您展开body元素中几个嵌套元素（向下）并检查它们是否有一个设置了margin-top时，它才会可见。

以下内容是站点截图的上半部分以及当您检查body标签时对应的Chrome Dev Tools视图。

这里没有顶部空白迹象，并且根据以上答案已重置了所有浏览器特定的CSS属性，但仍然存在不需要的白色空间。

以下是检查右侧嵌套元素时的视图。显然可以看到它上面的橙色top-margin被设置了。这是导致body元素顶部出现白色空间的原因。

如果您需要在元素上方保留一些空间，但又不想将其泄漏到body标签之上，请使用padding-top替换找到的元素中的margin-top。

希望这可以帮助您:)

- Valentine Shi

7

虽然这是一个老问题，但我刚遇到了。有时候你的文件是UTF-8编码的，并且在开头带有BOM字节序标记，但是你的模板引擎不支持它。因此，当你包含模板时，页面中会插入另一个（看不见的）BOM字节序标记。

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

这会导致页面开头出现间隙，因为浏览器会渲染BOM，但是对于你来说不可见（在检查工具中只显示为空格或引号）。

请将模板文件保存为UTF-8无BOM格式，或更换模板引擎以正确处理UTF8/BOM文档。

- rocketmonkeys

6

除了 CSS 重置之外，我还将以下内容添加到我的 div 容器的 CSS 中，并解决了问题。

position: relative;
top: -22px;

- David Hernandez

5

这个答案表明h1元素有一个隐式的margin-top，可能会导致空白。

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

建议将其移除是有帮助的，而且肯定会让人们认识到这种情况正在发生。

h1 { margin-top: 0; }

- Colin D

2

天哪，我在这上面卡了一个小时，谢谢伙计！ - user10980551

3

试试这个

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

- Milan and Friends

3

在Chrome浏览器中，height:100%会导致出现滚动条。 - cyrf

@cyrf 只需添加 box-sizing 属性，值为 border-box，例如 box-sizing: border-box; - Milan and Friends

1

可能有很多原因导致您出现上述的空白间隙。比如，如果您的HTML中有空的

元素，也会导致错误。
示例

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

移除HTML实体

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

- Praveen M P

1

overflow: auto

在<body>标签上使用overflow: auto是更清洁的解决方案，并且可以完美地工作。

- gilbert-v

0

解决方案：

您可以使用以下任一方法：

答案1：星号选择器意味着选择所有元素并将它们的边距和填充设置为0。

* {
    margin: 0;
    padding: 0;
  }

答案2：选择h1元素并将上边距设置为零。

h1{
    color:red;
    font-family: 'Times New Roman', Times, serif;
    border: 1px solid blue;
    text-align: center;
    font-size: 50px;
    margin-top: 0;
 }

- Ashraf Gardizy

0

这是一个针对那些不想对默认元素边距进行完全重置的人的答案。

为了消除由边距引起的顶部空白空间（当完全重置所有页面元素的边距时消失的相同空白空间），需要删除所有贡献到顶部空白空间的顶部边距。这意味着不是一个特定的标签（如

标签）或任何其他特定的标签会做到这一点，而是具有提供屏幕顶部内容的具有边距的初始标签（无论嵌套多深，距离文档开始多远以及有多少不同的标签）。

以下是一个示例，其中两个贡献到顶部边距的标签是标签和第一个

标签（嵌套在

标签内）。在文档中，有一个

标签，但它不会贡献到顶部边距。这两个标签都被赋予了class为，并将顶部边距设置为零，因此顶部空白空间消失了。

类似地，为了删除底部边距，也使用了类，并且标签和最后一个

标签都需要它。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
      .screen-start { margin-block-start: 0; }
      .screen-end { margin-block-end: 0; }
    </style>
  </head>
  <body class="screen-start screen-end">
    <header>
      <p class="screen-start">This is the header.</p>
    <main>
      <h1>Title again</h1>
      <p>This is the most page of the pages.</p>
      <article>
        <h2>Article 1</h2>
        <p>This is the first of the articles.</p>
      </article>
    </main>
    <footer>
      <h3>Footer header</h3>
      <p class="screen-end">This is the footer.</p>
    </footer>
  </body>
</html>

- hdante

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Ogden · Accepted Answer

在您的网站样式表的顶部添加一个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;
    }