Html 页面顶部的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18772154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
White space at top of page
提问by dan_vitch
I have about 20 pixels of white space at the top of my page. I have inspected every element and nothing has padding or margin in this area. When I inspect the body element it does NOT include this space. When I inspect the html element is does include this space. Also if I delete
我的页面顶部有大约 20 像素的空白区域。我检查了每个元素，在这个区域没有任何填充或边距。当我检查 body 元素时，它不包括这个空间。当我检查 html 元素时，它确实包含这个空间。另外如果我删除
<!DOCTYPE html>
the white space goes away.
空白消失了。
Here is my main layout
这是我的主要布局
<!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>
回答by Brian Ogden
Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:
在您的网站样式表顶部添加一个 css reset，不同的浏览器会呈现一些默认的边距和填充，也许外部样式表也会做一些您不知道的事情，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;
}
UPDATE: Use the Universal Selector Instead:@Frank mentioned that you can use the Universal Selector: *instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:
更新：改为使用通用选择器：@Frank 提到您可以使用通用选择器：*而不是列出所有元素，并且这个选择器看起来在所有主要浏览器中都是跨浏览器兼容的：
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
回答by David Hernandez
Aside from the css reset, I also added the following to the css of my divcontainer and that fixed it.
除了 css 重置之外，我还在div容器的 css 中添加了以下内容并修复了它。
position: relative;
top: -22px;
回答by Valentine Shi
If nothing of the above helps, check if there is margin-topset on some of the (some levels below) nested DOM element(s).
如果以上都没有帮助，请检查是否margin-top在某些（以下某些级别）嵌套的 DOM 元素上设置。
It will be not recognizable when you inspect bodyelement itself in the debugger. It will only be visible when you unfold several elements nested downin bodyelement in Chrome Dev Tools elements debugger and check if there is one of them with margin-topset.
当您body在调试器中检查元素本身时，它将无法识别。当你展开嵌套几个元素它只会是可见的下跌在bodyChrome的开发者工具元素调试元素，检查是否有与他们的一个margin-top组。
The below is the upper part of a site screen shot and the corresponding Chrome Dev Tools view when you inspect bodytag.
下面是站点屏幕截图的上半部分以及检查body标签时相应的 Chrome Dev Tools 视图。
No sign of top margin here and you have resetted all the browser-scpecific CSS properties as per answers above but that unwanted white space is still here.
这里没有上边距的迹象，您已经按照上面的答案重置了所有浏览器特定的 CSS 属性，但是不需要的空白仍然在这里。
The following is a view when you inspect the right nested element. It is clearly seen the orange'ish top-marginis set on it. This is the one that causes the white space on top of bodyelement.
以下是检查右侧嵌套元素时的视图。可以清楚地看到橙色top-margin设置在它上面。这是导致body元素顶部出现空白的原因。
On that found element replace margin-topwith padding-topif you need space above it and yet not to leak it above the bodytag.
在找到的元素上margin-top，padding-top如果您需要在其上方留出空间，但又不会将其泄漏到body标签上方，请替换为。
Hope that helps :)
希望有帮助:)
回答by mdesdev
Try this
尝试这个
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
回答by rocketmonkeys
Old question, but I just ran into this. Sometimes your files are UTF-8 with a BOM at the start, and your template engine doesn't like that. So when you include your template, you get another (invisible) BOM inserted into your page...
老问题，但我刚刚遇到了这个问题。有时您的文件是开头带有 BOM 的 UTF-8，而您的模板引擎不喜欢那样。因此，当您包含模板时，您的页面中会插入另一个（不可见的）BOM...
<body>{INVISIBLE BOM HERE}...</body>
This causes a gap at the start of your page, where the browser renders the BOM, but it looks invisible to you (and in the inspector, just shows up as whitespace/quotes.
这会导致页面开头出现间隙，浏览器在此处呈现 BOM，但它看起来对您不可见（并且在检查器中，仅显示为空格/引号。
Save your template files as UTF-8 without BOM, or change your template engine to correctly handle UTF8/BOM documents.
将您的模板文件另存为 UTF-8 无 BOM，或更改您的模板引擎以正确处理 UTF8/BOM 文档。
回答by Praveen M P
There could be many reasons that you are getting white space as mentioned above.
Suppose if you have empty div element with HTML Entitiesalso cause the error.
Example
如上所述，您获得空白的原因可能有很多。假设如果您有带有 HTML实体的空 div 元素也会导致错误。
例子
<div class="sample"> </div>
Remove HTML Entities
删除 HTML 实体
<div class="sample"></div>
回答by gilbert-v
overflow: auto
溢出：自动
Using overflow: autoon the <body>tag is a cleaner solution and will work a charm.
overflow: auto在<body>标签上使用是一种更清洁的解决方案，并且会很有魅力。
回答by Beetny
Check for any webkit styles being applied to elements like ul, h4 etc. For me it was margin-before and after causing this.
检查是否有任何 webkit 样式应用于 ul、h4 等元素。对我来说，这是导致这种情况的前后边距。
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
回答by Siddharth Shukla
I Just put CSS in my <div>now working in code
我只是把 CSS 放在我<div>现在的代码中
position: relative; top: -22px;
