Extra white space at the top of my page

Question

I'm working on a website and I just noticed there there is this unexplained white space at the top and bottom of my page. I search through some post and they told me to make sure I used UTF-8 encoding without BOM and I tried that and it made no difference. If anyone would be willing to look at it the url is url

Answer 1

The default spacing (margin) on the <h1> element is causing the top spacing. Add this in your css.

h1 { margin-top: 0; }

Answer 2

It's not a space.. There is a button on the top right corner.

Remove this source from your HTML code

    <div id="escapeButton">
        <button> <a href="http://google.com" title="escape">Escape</a> </button>
    </div>

Answer 3

add this on first line of css

* {
margin: 0px;
padding: 0px;
}

Answer 4

I have also had this problem and used this in the first line of my CSS file:

body {
padding: 0;
margin: 0;
}

You can also add margin-top: -10px; if there are still problems.

Answer 5

If setting h1 { margin-top: 0px } works, maybe you encounter the collapsing margins problem.

You can know more in margin-top in a nested div

Answer 6

in my case, a div with style like this

    margin: 0 auto 80px;

make an extra white space on top