White space below all h tags in div

Question

Here's a JSfiddle of my problem https://jsfiddle.net/d20fo54o/

The space below the h3 tag will not go away. I've tried making padding 0, margin 0, and looking it up.

It's not the div under it either, because if you delete the other div and replace it with anything else the space is still there.

 div { background-color: #1D62F0; border-radius: 20px; text-align: center; width: 600px; margin: 0 auto; } div #list { background-color: white; width: 100%; border-top-right-radius: 0px; border-top-left-radius: 0px; } div #title { color: white; } 

 <div> <h3 id='title'>Hello</h3> <div id='list'> <p>hello</p> </div> </div> 

Answer 1

Adding h3, p { margin: 0 } . Working just fine, see fiddle

https://jsfiddle.net/d20fo54o/1/

Answer 2

add margin:0; for both p and h3

 div { background-color: #1D62F0; border-radius: 20px; text-align: center; width: 600px; margin: 0 auto; } div #list { background-color: white; width: 100%; border-top-right-radius: 0px; border-top-left-radius: 0px; } div #title { color: white; } h3, p{ margin:0; } 

  <div> <h3 id='title'>Hello</h3> <div id='list'> <p>hello</p> </div> </div> 

Answer 3

In chrome dev tools you can see how margins (the peach coloured bits) affect the overall page.

In this picture, we can see h3#title has a margin-bottom (because it's a margin at the bottom) that is going over the blue bit, so we can say.

h3#title {
  margin-bottom: 0px;
}

That will remove the bit below the title Hello, but there is another margin (margin-top this time, because it's a margin on top) that looks to affect that area, this time it's p that is causing the issue so again we can do something like.

p {
  margin-top: 0px;
}

Putting it all together

Now let's put these little bits of code we've worked out into your CSS.

 div { background-color: #1D62F0; border-radius: 20px; text-align: center; width: 600px; margin: 0 auto; } div #list { background-color: white; width: 100%; border-top-right-radius: 0px; border-top-left-radius: 0px; } div #title { color: white; } /* our new code */ h3#title { margin-bottom: 0px; } p { margin-top: 0px; } 

 <div> <h3 id='title'>Hello</h3> <div id='list'> <p>hello</p> </div> </div> 

And there we go, the pesky margins are gone and so is the extra spacing.

Hope this helps.