Normalize CSS w/local Stylesheet显示不正确

我做网页设计已经一年多了，但有时还是会在前端发生一些奇怪的事情。我正在使用以下代码创建一个简单的个人使用模板:

<!DOCTYPE html>
<html>
    <head>
        <title>Matt's Template</title>
        <!-- Stylesheets -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
        <link rel="stylesheet" href="CSS/general.css" type="text/css" />
    </head>
    <body>
            <section class="container">
            <h1>Matt's Template</h1>
            </section>
        <!-- Javascript Libraries -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
        <!-- My Javscript -->
    </body>
</html>

如果我在Chrome浏览器中查看这段代码，看起来正文从html标签向下移动了大约15px。然而，我的css明确地告诉html和body标签没有填充或边距。为什么会有这样的空间?这种情况以前发生过，我不太确定我是如何解决的。一定有一些显而易见的答案。这也是我的css。

html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}
.container {
    height:100%;
    width:960px;
    position:relative;
    margin:0 auto;
    padding:0;
    background:#E0E0E0;
}

问题是你的<h1>仍然有默认的边距，你只拿走了默认的<body>边距8px，但没有其他元素的默认UA样式。你应该考虑使用重置，这样你就可以"从头开始"每个元素。

http://jsfiddle.net/qfSZ5/3/

尝试添加

h1 {margin:0}

或

h1 {display:inline-block}

如果你想保持它的外边距在父元素内。

jsfiddle

这是因为h1有浏览器指定的默认边距;这可能有点乱。有些人这样做只是为了防止默认的边距和内边距:

* {
    margin: 0;
    padding: 0;
}

字面意思是:

"浏览器，请取消所有现有元素的默认边距和内边距。谢谢!"

相关内容

最新更新

热门标签：