Weird space above div when using line-height and elements

Question

I try to have to div on the top of the page with a <h2> element centered in it (horizontally and vertically).

HTML

<div id="header"><h2>The header</h2></div>

CSS

body{
    margin:0;
    padding:0;
}
#header{
    width:100%;
    height:100px;
    background-color: #9C27B0;
    line-height: 100px;
    text-align: center;
}

The weird effect I get is that there is a space between the top of the div and the upper edge of the window.

If I only write text in (without h2 tags) in the div no such problem appears. But, I cannot find any source explaining why line-height and <h> tags produce weird outcomes.

Answer 1

Headers all have default margin/padding. You can delete them by applying this code.

CSS

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}