1

I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:

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

If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.

html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;

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

3 回答 3

3

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

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

于 2013-05-13T20:55:53.807 回答
2

尝试添加

h1 {margin:0}

或者

h1 {display:inline-block}

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

jsfiddle

于 2013-05-13T20:58:42.153 回答
1

这是因为 h1 具有浏览器分配的默认边距；那可能有点乱。有些人这样做是为了防止默认边距和填充：

* {
    margin: 0;
    padding: 0;
}

这字面意思是：

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

于 2013-05-13T22:10:05.053 回答