页面顶部的空白区域
dan*_*tch 46 html css3 razor asp.net-mvc-4
我的页面顶部有大约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>
Bri*_*den 57
将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;
}
- 说实话,使用*作为选择器并不是一个好主意.您要求浏览器将样式添加到不需要它的内容(例如<script>标记),或者将样式添加到首先没有设置任何内容的内联元素.这仅用于让浏览器做更多工作来显示页面.虽然这可能很小,但总的来说会让事情变慢,因为浏览器需要考虑更多内容. (3认同)
- 使用*选择所有元素可以达到相同的效果.像`*{css}`这样你就不必列出每个元素. (2认同)
如果以上都没有帮助，请检查是否margin-top在某些（以下某些级别）嵌套的 DOM 元素上设置。
当您body在调试器中检查元素本身时，它将无法识别。当你展开嵌套几个元素它只会是可见的下跌在bodyChrome的开发者工具元素调试元素，检查是否有与他们的一个margin-top组。
下面是站点屏幕截图的上半部分以及检查body标签时相应的 Chrome Dev Tools 视图。
这里没有上边距的迹象，您已经按照上面的答案重置了所有浏览器特定的 CSS 属性，但是不需要的空白仍然在这里。
以下是检查右侧嵌套元素时的视图。可以清楚地看到橙色top-margin是设置在它上面。这是导致body元素顶部出现空白的原因。
在找到的元素上margin-top，padding-top如果您需要在其上方留出空间，但又不会将其泄漏到body标签上方，请替换为。
希望有帮助:)
老问题，但我刚刚遇到了这个问题。有时您的文件是开头带有 BOM 的 UTF-8，而您的模板引擎不喜欢那样。因此，当您包含模板时，您的页面中会插入另一个（不可见的）BOM...
<body>{INVISIBLE BOM HERE}...</body>
这会导致页面开头出现间隙，浏览器在此处呈现 BOM，但它看起来对您不可见（并且在检查器中，仅显示为空格/引号。
将您的模板文件另存为 UTF-8 无 BOM，或更改您的模板引擎以正确处理 UTF8/BOM 文档。
小智 6
除了 css 重置之外，我还在div容器的 css 中添加了以下内容并修复了它。
position: relative;
top: -22px;
这个特定的答案表明 h1 元素有一个隐式的 margin-top ，可能会导致空白
删除它的建议很有帮助，当然也让人大开眼界，了解这是如何发生的
h1 { margin-top: 0; }
- 天哪，我花了一个小时在这上面，谢谢伙计！ (2认同)