在页面顶部空白 [英] White space at top of page
问题描述
我有大约20个空白的像素在我的页面的顶部。我已经检查每一个元素并没有什么具有填充或利润率在这个区域。当我检查身体的元素，不包括这个空间。当我检查HTML元素是不包括此空间。另外，如果我删除
＆LT;！DOCTYPE HTML＆GT;
白色空间消失。
下面是我的主要布局
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT;标题＆LT; /标题＆GT;
＆LT;链接HREF =〜/ favicon.ico的相对=快捷方式图标类型=图像/ X-图标/＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度/＆GT;
@RenderSection（的CSS，FALSE）
＆LT; /头＆GT;＆LT;身体GT;
@RenderSection（JavaScript的，FALSE）
＆LT; /身体GT;
＆LT; / HTML＆GT;
一个css重置添加到您的网站样式表的顶部，不同的浏览器渲染一些默认margin和padding也许外部样式表做一些你不知道的同样，一个CSS复位只是初始化一个新的调色板可以这么说：
HTML，身体，DIV，跨度大，小程序，对象，iframe中，H1，H2，H3，H4，H5，H6，P，BLOCKQUOTE，pre，A，简称，简称，地址，大，举，code，德尔，DFN，EM，字体，IMG，插件，大骨节病，q，S，桑普，小，罢工，强子，SUP，TT，VAR，b， U，I，中心，DL，DT，DD，醇，UL，李，字段集，形式，标签，图例说明{
保证金：0;
填充：0;
边框：0;
概要：0;
字体大小：100％;
垂直对齐：基线;
背景：透明;
}
更新：使用通用选择相反：
@Frank提到，您可以使用通用选择： * ，而不是列出所有的元素，而这种选择看起来是<一个href=\"http://stackoverflow.com/questions/9988865/browser-support-for-askerisk-wild-card-in-css\">cross浏览器在所有主要的浏览器兼容的：
* {
保证金：0;
填充：0;
边框：0;
概要：0;
字体大小：100％;
垂直对齐：基线;
背景：透明;
}
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>
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>
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;
}
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屋！
