Question 45644 in CSS Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search