Why is there space between my <header> and the border of the page?

January 31, 2023

My page is just a tag with an in it. When I set the background-color of the to black, there is a weird gap between the black background and the page border. Setting the padding and margin on all sides to 0px does not help. Why is this?

#homeHDR {
  background-color: black;
}

<header id="homeHDR">
  <h1><span id="blueSPN">Papyrus</span>Note</h1>
</header>

>Solution :

The <body> and <h1> tags have a default margin, so resetting them will give you the expected result without any borders:

#homeHDR {
  background-color: black;
}
body, h1 { /* Remove default margin for these guys */
  margin: 0;
}

<header id="homeHDR">
  <h1><span id="blueSPN">Papyrus</span>Note</h1>
</header>

Be careful though. You might only want to reset the margin for the h1 tag that’s inside the header to get rid of the ugly border at the top, but not other h1 tags found inside the page (even though that’s discouraged). So maybe, you want to have a more specific selector for that h1, e.g. #homeHDR h1 { margin: 0; }.

As Jon P correctly pointed out, the Inspector and Elements Panel in the DevTools are the only way to safely detect why these layout issues are happening, e.g. in your case which elements create these spaces, by hovering over the elements.

Margin from body: