CODEWITHSUNDEEP
htmlcss
Mehmet
Mehmet

Reputation: 227

Remove space between header and the page

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.

enter image description here

Here is my code:

body {
  background-color: red;
}
#example {
  height: 75px;
  background-color: #484848;
}
<header id="example">
  example
</header>

Upvotes: 2

Views: 4040

Answers (5)

philipdev
philipdev

Reputation: 33

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

body{
    margin: 0;
}

in the top of the css document.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371053

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

Upvotes: 2

Johannes
Johannes

Reputation: 67738

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

Upvotes: 1

j08691
j08691

Reputation: 207861

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>

Upvotes: 4

Rok Povsic
Rok Povsic

Reputation: 4895

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.

Upvotes: 0

Related Questions