Normalize CSS w/local Stylesheet does not appear correct

StackOverflow https://stackoverflow.com/questions/16530779

  •  29-05-2022
  •  | 
  •  

题

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;
}
有帮助吗？

解决方案

The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.

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

其他提示

Try adding

h1 {margin:0}

or

h1 {display:inline-block}

if you want to keep its margins inside the parent.

jsfiddle

That's because h1 has a default margin assigned by the browser; that could be kinda messy. Some people just do this in order to prevent default margins and padding:

* {
    margin: 0;
    padding: 0;
}

And that literally means:

"Hi browser, please nullify all the defaults margins and padding on all the existing elements. Thanks!"

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top