Small Margin/Gap at the Top of Document

small margin / gap at the top of document

In your CSS file add this:

html, body { margin: 0; padding: 0; }

Gap at top of page despite margin:0 and padding: 0

I think this is caused by the use of position: relative and your h1 element inheriting a margin by default. When you use position: relative, the margin does not seem to be shifted with the actual content and therefore gets applied to the top of the page.

I have changed the relevant CSS to fix this:

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

You may need to do the same for any other elements that are set to position: relative and have a margin (e.g. h3 tags)

It would be best to cut down on the use of position relative as it is somewhat difficult to predict such behaviour.

How can I remove the gap from the top of page?

After troubleshooting and looking for hidden or erroneous UTF characters we figured out that the cause was an un-closed meta charset tag.

<meta charset="UTF-8"/>

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;
    }

Gap between first element and top of page

That's because of the p's margin, you can just remove it:

p {
  margin: 0;
}

Small unwanted space on top and bottom of page

Add this to your CSS:

* {
margin: 0;
padding: 0; }

H1 makes space/gap between header and top of page

Heh, it's a very interesting effect - "margin collapsing".
h1 has default margin-top.

Parent and first/last child

If there is no border, padding, inline content, or clearance to
separate the margin-top of a block from the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
from the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.

To solve this problem add padding-top to container or replace header margin-top with padding-top. Also can set h1 margin-top to 0.

You can read more about it here.

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 */
}

---

Related Topics