Question

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

enter image description here

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>

Answer 1

将margin: 0;添加到.header h1。

Answer 2

你的CSS中有.mobile，而不是你的HTML。这可能是问题，因为没有应用CSS

Answer 3

您的<h1>标记会自动为其分配边距属性，此边距会创建白色“条形图”。如果你删除了上边距，请说像这样的CSS ......

.header h1 {
    margin-top:0;
}

......白色空间应该消失。

Answer 4

这是因为h1保证金。在.heading h1中添加以下2行，它将解决问题。

.header h1 {
    margin: 0;
    padding: 21px 0;
}

Answer 5

在css中添加此项以使所有元素的边距= 0

* { margin: 0; }

Answer 6

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

.ui-bar-inherit{border:0px !important;}

从页面顶部删除白条

6 个答案: