Removing white bar from top of page

Question

I have the following code, with the html and body margins and padding set to zero, but their is still a gap at the top, why?:

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>

score 4 · Accepted Answer · answered Apr 07 '13 at 11:15

4

Add margin: 0; to .header h1.

answered Apr 07 '13 at 11:15

mrks

8,033
1
33
62

score 1 · Answer 2 · answered Apr 07 '13 at 11:17

1

You've got .mobile written in your CSS but not in your HTML. This could be the issue as none of the CSS Is being applied

answered Apr 07 '13 at 11:17

Kevin Lynch

24,427
3
36
37

score 1 · Answer 3 · answered Apr 07 '13 at 12:05

1

add this in the css to make all your elements margins = 0

* { margin: 0; }

answered Apr 07 '13 at 12:05

Ahmad Santarissy

627
6
13

score 0 · Answer 4 · answered Apr 07 '13 at 11:16

0

Your <h1> tag has a margin property assigned to it automatically, and this margin is creating the white "bar." If you remove the top margin, say with CSS like this...

.header h1 {
    margin-top:0;
}

...the white space should go away.

answered Apr 07 '13 at 11:16

ASGM

11,051
1
32
53

score 0 · Answer 5 · edited Apr 07 '13 at 11:40

0

This is because of h1 margin. Add the following 2 lines in .heading h1 and it will solve the problem.

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

edited Apr 07 '13 at 11:40

Firoze Lafeer

17,133
4
54
48

answered Apr 07 '13 at 11:20

razahassank

195
8

score 0 · Answer 6 · answered Feb 21 '19 at 18:50

0

I use this way. It works for me.

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

answered Feb 21 '19 at 18:50

Master Jowin

11
1

Removing white bar from top of page

6 Answers6

Linked