因此,这很奇怪,即使我已经应用了标准的CSS重置,我在页面的顶部也获得了少量利润。如果我在Chrome / Firefox /甚至是IE上打开检查器,我会看到主体正在读取我的margin:0
重置,但是无论如何仍会增加一个空白。
间隙:
显示margin:0
的Chrome Web Inspector受到好评:
因此,这里的超级duper怪异部分是,如果抛出margin: 0 !important;
之类的重要字符,差距就会消失。我已经多次使用此确切的模板设置而没有问题。希望有人看到一些让我眼前一亮的东西。
的HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
的CSS
注意:由于我刚开始执行此项目,因此
Site.css
现在是空文件。html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
最佳答案
页边距在<h2>
上,而不在<body>
上。 h2
必须有其他选择器,该选择器添加了额外的顶部边距。在您自己的Site.css
样式中,为margin-top: 0
添加h2