HTML5でHeader上部の隙間を埋める #HTML5

HTML5でコーディングをしていると最上部に隙間ができる時があるので、それの解消のために試したやり方

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style-home.css" type="text/css">
  <title>サンプルページ</title>
</head>
<body>
  <header>
    <nav>
      <ul class="ul-header">
        <li class="header-list">
          <a href="/" alt="トップページへ戻ります">
            <img src="rogo.png" width="150" height="60">
          </a>
        </li>
        <li class="header-list">リスト１</li>
        <li class="header-list">リスト２</li>
        <li class="header-list">リスト３</li>
        <li class="header-list">リスト４</li>
        <li class="header-list">リスト５</li>
        <li class="header-list">リスト６</li>
      </ul>
    </nav>
  </header>

  <!-- 中略 -->

</body>
</html>

CSSは下の形で記述

style-home.css

body {
  padding: 0;
  margin: 0;
}
header nav ul {
  height: 60px;
  margin-top: 0;
}
.header-list {
  height: 60px;
  float: left;
  list-style: none;
  text-align: right;
}

「header nav ul」セレクタは「.ul-header」に変更してもいいかもしれない。
「header nav ul」セレクタの高さの指定「height: 60px;」を取り除いた場合だと、この構造では上部の隙間が消えなかった。
どうやら高さの指定は必要らしい。構造にもよるのかもしれないけど。