1

Web デザインを始めて 1 年ちょっと経ちますが、フロント エンドで奇妙なことが時々起こります。次のコードを使用して、個人用の簡単なテンプレートを作成しています。

<!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 タグから約 15 ピクセル下にずれているように見えます。ただし、私の 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;
}
4

3 に答える 3

3

問題は、<h1>まだデフォルトのマージンがあり、デフォルト<body>の 8px のマージンを外しただけで、デフォルトの UA スタイルを持つ他の要素を外していないことです。各要素を「ゼロから始める」ことができるように、リセットの使用を検討する必要があります。

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

于 2013-05-13T20:55:53.807 に答える