Question

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

<!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;
}

Answer 1

问题是你的<h1>仍然有其默认边距，你只取下了8px的默认<body>边距，而不是其他具有默认UA样式的元素。您应该考虑使用reset，以便为每个元素“从头开始”。

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

Answer 2

尝试添加

h1 {margin:0}

或

h1 {display:inline-block}

如果您想将其边距保留在父级内。

jsfiddle

Answer 3

那是因为h1有一个浏览器指定的默认边距;这可能有点凌乱。有些人这样做是为了防止默认边距和填充：

* {
    margin: 0;
    padding: 0;
}

字面意思是：

“嗨浏览器，请取消所有现有元素的所有默认边距和填充。谢谢！”

规范化CSS w /本地样式表似乎不正确

3 个答案: