White Space at Top of Page

White space at top of page

Add a css reset to the top of your website style sheet, different browsers render some default margin and padding and perhaps external style sheets do something you are not aware of too, a css reset will just initialize a fresh palette so to speak:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

UPDATE: Use the Universal Selector Instead:
@Frank mentioned that you can use the Universal Selector: * instead of listing all the elements, and this selector looks like it is cross browser compatible in all major browsers:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

Why is there white space at the top of my HTML/CSS website?

It's caused by margin collapsing phenomena. See related question. If you remove content of your main.css you will see that layout becomes "normal" (e.g. no white space on top), so normalize.css is not the cause of the issue.

How to fix?

Simply, add this to your normalize.css *{} section. See fiddle.

* {
overflow:hidden; /* or auto */
}

Extra white space at the top of my page

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

h1 { margin-top: 0; }

How do I get rid of the white space at the top of my web page?

Your whitespace is coming from the top margin of 10px on #inner-container. See this JSFiddle with the top margin changed to 0px: https://jsfiddle.net/rcz6ksft/.

#inner-container {
    margin: 0px 10px 10px 10px;
}

How to remove white space from the top of my website page

Developer tools shows some characters at the beginning of your body tag. Remove them.

How to get rid of white space between the header, top of the viewport and the first image?

by-default ul tag have margin up and bottom so use this css to reset style.

ul.navigatie {
    margin: 0;
} 

---

Related Topics