У меня проблема с неизвестным пространством между навигацией DIV и списком UL

Question

Вот ссылка на скрипку, которую вы можете видеть, когда мы наводим курсор мыши на домашнюю навигацию, она меняет цвет фона, но между заголовком и домашней навигацией остается мало места, почему появляется пространство, как его решить? Вот скрипка .

* {
  box-sizing: border-box;
}

body {
  font-family: Verdana, Arial, sans-serif;
}

#wrapper {
  background-color: #e6b756;
  border: 3px solid black;
}

header {
  background-image: linear-gradient(45deg, white 0%, orange 75%, black 100%);
  padding: 15px;
  border-bottom: 2px solid black;
}

header img {
  float: left;
  padding-right: 15px;
}

header h2 {
  font-size: 230%;
}

header h3 {
  font-size: 125%;
}

footer {
  font-size: 70%;
  text-align: center;
  padding: 10px;
  background-color: #e6b756;
  clear: both;
}

nav {
  background-color: #e6b756;
  float: left;
  width: 150px;
}

ul {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  display: block;
  border-bottom: 3px solid white;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

a:hover {
  background-color: #EAEAEA
}

main {
  overflow: auto;
  background-color: white;
  padding: 10px 20px
}

Answer 1

Некоторым тегам HTML присвоены определенные свойства. Полный список вы можете прочитать здесь: .

В этом случае HTML автоматически инициализирует теги ul, чтобы иметь margin-top: 1em. Вам нужно добавить margin: 0, или конкретно margin-top: 0 к вашему тегу ul, чтобы удалить верхнее поле.

* {
  box-sizing: border-box;
}

body {
  font-family: Verdana, Arial, sans-serif;
}

#wrapper {
  background-color: #e6b756;
  border: 3px solid black;
}

header {
  background-image: linear-gradient(45deg, white 0%, orange 75%, black 100%);
  padding: 15px;
  border-bottom: 2px solid black;
}

header img {
  float: left;
  padding-right: 15px;
}

header h2 {
  font-size: 230%;
}

header h3 {
  font-size: 125%;
}

footer {
  font-size: 70%;
  text-align: center;
  padding: 10px;
  background-color: #e6b756;
  clear: both;
}

nav {
  background-color: #e6b756;
  float: left;
  width: 150px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  display: block;
  border-bottom: 3px solid white;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

a:hover {
  background-color: #EAEAEA
}

main {
  overflow: auto;
  background-color: white;
  padding: 10px 20px
}

<div id="wrapper">
  <header>
    <img src="images/pumpkin.gif" alt="Pumpkin" width="85">
    <h2>The Halloween Store</h2>
    <h3>For the little Goblin in all of us!</h3>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="props.html">Props</a></li>
      <li><a href="costumes.html">Costumes</a></li>
      <li><a href="masks.html">Masks</a></li>
    </ul>
  </nav>

  <main>
    <h1>Welcome to my site.<br>Please come in and stay awhile.</h1>
    <p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
    <p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
    <h2>Product of the week</h2>
    <p><img src="images/cat1.jpg" alt="Deranged cat" width="150"></p>
    <p><a href="????">20" Deranged cat</a></p>
    <h3>My guarantee</h3>
    <p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <strong>No questions asked!</strong></p>
  </main>

Answer 2

Ознакомьтесь с использованием нормализующего CSS-файла, чтобы гарантировать одинаковую инициализацию элементов в разных браузерах.

Как правило, он содержит ul { margin:0 }, необходимый для устранения описанного вами разрыва