-1

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>
Jon P
  • 19,442
  • 8
  • 49
  • 72
DUSTIN NGUYEN
  • 1
  • 2
  • 1
    Very hard to tell without code! Keep in mind that `` has a default padding. Please provide a [MCVE]. In the mean time use the browser developer tools to inspect the header and body elements to see where the margin/padding is coming from. – Jon P Jan 31 '23 at 01:21
  • If you show us the page's code we might have a better chance of assisting. – ceejayoz Jan 31 '23 at 01:21

2 Answers2

1

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:

enter image description here

Margin from h1:

enter image description here

Kostas Minaidis
  • 4,681
  • 3
  • 17
  • 25
0

There will be a duplicate out there somewhere for this.

body has a default margin, generally of 8px. Remove it and your are good

body {
  margin: 0;
}

#homeHDR {
  background-color: black;
}
<header id="homeHDR">
  <h1><span id="blueSPN">Papyrus</span>Note</h1>
</header>

Somewhat more important than this code is getting to know the tools at your disposal. All desktop browsers these days have some variation of "Developer Tools", commonly accessed through f12. Through these you can inspect elements to see that styles have been applied to the elements. By inspecting the h1 you will see where the vertical spacing is coming from.

Jon P
  • 19,442
  • 8
  • 49
  • 72