-3

As the title explains; I have an <h1> element located in the <header> section of the page and I want it to have a background color and not have white space above it. In the CSS, I have set the padding to 0; and the margin to 0; as well. Even after these changes, I have white space above my <h1> tag. Here's the code I used...

header {
  background-color: #FFFFFF;
}

html,
body {
  background-color: #7fffd4;
  margin: 0;
  padding: 0;
}
<header>
  <div class="name">
    <h1>WHITE SPACE ABOVE THIS TAG</h1>
  </div>
</header>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Web Developer
  • 7
  • 1

3 Answers3

0

You should also state that h1 has zero padding and margin:

 html, bod {
     background-color: #7fffd4;
     margin: 0;
     padding: 0;
   }

 h1 {         
     margin: 0;
     padding: 0;
   }
apomene
  • 14,282
  • 9
  • 46
  • 72
  • OP does not ask for the `h1` element to have a `background-color` set to it. That is used on the `header` section, not the `h1`. – Thomas Darvik May 07 '18 at 13:11
0

Change the CSS to target the h1 element as well. Removing the padding and margin on the wrapping elements will not remove it down the tree, i.e removing from header will not remove it from all elements under header

header {
  background-color: #FFFFFF;
}

html, body {
  background-color: #7fffd4;
}

h1 {
  margin: 0;
  padding: 0;
}
Thomas Darvik
  • 748
  • 7
  • 22
  • `Removing the padding and margin on the wrapping elements will not remove it down the tree` ---> you mean what by this? – Temani Afif May 07 '18 at 13:13
  • Removing the padding from `header` will not remove it from all elements under `header`. What OP is doing wrong in his question, is that he is targeting a wrapping element, and expecting it to remove the `margin/padding` from all elements under `header`. – Thomas Darvik May 07 '18 at 13:14
  • Op is not doing anything wrong, he's simply facing a margin-collapsing issue ... and you explanation is not correct for his issue, he don't need to remove margin of h1, he need to avoid margin-collapsing – Temani Afif May 07 '18 at 13:16
  • What does that answer have to do with that question? Please keep all links relevant for the discussion at hand. If you have a personal problem with me trying to help people, then that is something you just have to live with. – Thomas Darvik May 07 '18 at 13:20
  • As said in the other question that is not relevant, you are free to edit my answer, or make your own. That is the whole point of StackOverflow. If you have problem with that, I suggest you read the [be-nice](https://stackoverflow.com/help/be-nice) section of the help-page. – Thomas Darvik May 07 '18 at 13:23
  • Is "exactly like you did here [link]...providing the wrong explanation by removing the issue and not fixing the issue " really a productive comment, or just unnecessary? I vote for the last. – Thomas Darvik May 07 '18 at 13:28
  • This is already a duplicate of another answer. I would suggest you change the wording, or even better: add your own answer to OP's question. Like you said, my answer is wrong, so there is no point in people looking at it, or the comments. – Thomas Darvik May 07 '18 at 13:33
  • Ok, let's make a deal; I read the duplicate question if you read the be-nice-guide? Enough spam, have a good day. – Thomas Darvik May 07 '18 at 13:38
-1

You need to remove every element's margins/padding at the beginning, not just the body 

* {
    margin: 0;
    padding: 0;
}

header {
    background-color: #FFFFFF;
}

html, body {
    background-color: #7fffd4;
}
<header>
<div class = "name">
<h1>WHITE SPACE ABOVE THIS TAG</h1>
</div>
</header>
Rainbow
  • 6,772
  • 3
  • 11
  • 28