页面顶部的空白 [英] White space at top of page
问题描述
我的页面顶部有大约 20 像素的空白区域.我检查了每个元素，在这个区域没有任何填充或边距.当我检查 body 元素时，它不包括这个空间.当我检查 html 元素时，它确实包含这个空间.另外如果我删除
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
<!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 reset，不同的浏览器会呈现一些默认的边距和填充，也许外部样式表会做一些你不知道的事情同样，可以这么说，css 重置只会初始化一个新的调色板:
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:
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 提到你可以使用 Universal Selector: * 而不是列出所有元素，这个选择器看起来像 跨浏览器兼容所有主流浏览器:
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:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
这篇关于页面顶部的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
