Question

所以这是一个奇怪的问题，尽管我已经应用了标准的CSS重置，但我在页面顶部获得了一小部分余量。如果我在Chrome / Firefox /甚至 gasp IE中打开检查器，我看到正在读取margin:0重置的正文，但无论如何都会增加间隙。

差距： enter image description here

显示margin:0的Chrome网络检查员正在受到尊重： enter image description here

所以，这里的超级骗子奇怪的部分是，如果像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;
}

Answer 1

保证金位于<h2>，而不是<body>。 h2必须有一些其他选择器添加额外的上边距。在您自己的Site.css个样式中，请为margin-top: 0

添加h2

Answer 2

Bootstrap可能会从另一个元素覆盖它。检查它嵌套的元素是否在main.css中设置了边距。

正在应用Html CSS重置，但没有兑现

2 个答案: