1

html と body の余白とパディングをゼロに設定した次のコードがありますが、まだ上部にギャップがあります。なぜですか?:

ここに画像の説明を入力

CSS

html, body {
    margin: 0;
    padding: 0;
}

.mobile body {
    overflow: hidden;
}

.mobile #wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

.mobile #scroller {
    height: 3000px;
}


.header {
    background: url(../img/dark_exa.png) repeat;
    height: 300px;
    margin: 0 auto;
    text-align: center;
}

.header h1 {
    color: white;
}

HTML

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <title>Mobile Parallax with Stellar.js - Demo</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>

        <div id="wrapper">
            <div id="scroller">

                <div class="header">
                    <h1>Product Title</h1>
                </div>

            </div>
        </div>

        <script src="lib/jquery.min.js" ></script>
        <script src="lib/jquery.stellar.min.js"></script>
        <script src="lib/iscroll.js"></script>
        <script src="script.js"></script>
    </body>
</html>
4

6 に答える 6

4

に追加margin: 0;し.header h1ます。

于 2013-04-07T11:15:21.927 に答える
1

CSS には .mobile が記述されていますが、HTML には記述されていません。CSS が適用されていないため、これが問題である可能性があります

于 2013-04-07T11:17:01.817 に答える
1

これをcssに追加して、すべての要素のマージンを= 0にします

* { margin: 0; }
于 2013-04-07T12:05:01.820 に答える
0

タグ<h1>にはマージン プロパティが自動的に割り当てられ、このマージンが白い「バー」を作成しています。上余白をなくす場合は、CSSでこんな風に言うと…

.header h1 {
    margin-top:0;
}

...空白はなくなるはずです。

于 2013-04-07T11:16:37.340 に答える