1

我有以下代码，将 html 和正文边距和填充设置为零，但它们仍然是顶部的差距，为什么？：

在此处输入图像描述

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

您的 .mobile 是用 CSS 编写的，但不是用 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 回答
0

这是因为 h1 边距。在 .heading h1 中添加以下 2 行即可解决问题。

.header h1 {
    margin: 0;
    padding: 21px 0;
}
于 2013-04-07T11:20:21.423 回答
0

我用这种方式。这个对我有用。

.ui-bar-inherit{border:0px !important;}
于 2019-02-21T18:50:50.590 回答