Remove space between header and the page

Question

My header has a space above it. I want it to stay to the top without any space. I attached an image that shows the space.

Here is my code:

 body { background-color: red; } #example { height: 75px; background-color: #484848; }

 <header id="example"> example </header>

Answer 1

The <body> element has a default margin. Remove it:

 body { background-color: red; } #example { height: 75px; background-color: #484848; } body { margin-top: 0; }

 <header id="example"> example </header>

Answer 2

Many elements come with default margins and/or padding.

This is due to the browser's default style sheet .

Add this to your elements where necessary:

margin: 0;
padding: 0;

Here is a sample default stylesheet browsers might use: https://www.w3.org/TR/CSS22/sample.html

EDIT (since you added more code)

In your case, you need to remove the margins from the body element.

body { margin: 0; }

Answer 3

If this is your complete HTML and CSS, the red margin can't be that wide, but anyway: Add

html, body { 
  margin: 0; 
}

to your CSS

Answer 4

There are two things you could do. One is remove height: 75px so the div takes only it's natural height (the height of the text).

Or you could add vertical-align: top to the #example to move the text to the top - div stays the same size here.

Answer 5

This solves your problem. element body have a margin by default.

body{
    margin: 0;
}

in the top of the css document.