余白を完全に消したい

Question

###前提・実現したいこと
HTML + CSS でヘッダーとフッターをつけたいと思っています。
しかしながら、余白をうまく消すことができません。
以下にやろうとしていることを示します

https://codepen.io/anon/pen/MvJZzd

<div class="content">
<div class="header">header</div>
<div class="body"><h1>content</h1></div>
<div class="footer">footer</div>
</div>

.content {
  margin: 0;
  height:100%;
}

.header,
.footer {
  background-color: #99cc00;
  height: 5%;
}
.body {
  background-color:#EDF7FF;
  height: 90%;
}

margin, padding など、分かる範囲で試行錯誤しましたが、だめでした。
フッターは想定どおりになっているのになぜなのか、さっぱりわかりません。

ご存知の方がいましたら、よろしくお願いします。

Answer 1

リセットCSSを使用してみてはいかがでしょうか？

h1{
 margin:0;
}

取り急ぎこれで余白はなくなると思います。

Comments

[sannye]

消えました。しかし、予想外で、びっくりしています。
<h1>content</h1>を取り除いても同様の効果なので、一体どういうカラクリなのでしょうか。。。

[sannye]

「リセットCSS」というのは、ブラウザがデフォルトで提供するCSSをつぶすテクニックなのですね。勉強になりました。ありがとうございます。

[LanHma]

予期せぬレイアウトになった場合はデベロッパーツールもぜひ使ってみて下さい。
Google Chromeなら右クリック→検証で確認する事ができます。