消除<nav>和<hgroup>之间的空间？ HTML5 </hgroup> </NAV>

Question

这是我的CSS：

  header {
    hgroup {
      background: #1F1E1E;
      height: 100px;

      padding: 0px;
      margin: 0px;

      color: #FEFFFE;

      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;

      h1,h2 {
        padding: 0px;
        margin: 0px;
      }
    }

    nav {
      background: #FEFFFE;
      height: 60px;

      padding: 0px;
      margin: 0px;

      -webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.2);
      -moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.2);
      box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.2);

      ul {
        list-style: none;
        padding: 0px;

        li {
          float: left;
          padding: 20px 30px 20px 0px;
        }
      }
    }
  }

这是我的HTML：

<header>
    <hgroup>
        <h1>Lorem Ipsum</h1>
        <h2>Lorem ipsum dolor sit amet.</h2>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <div class="clearfix"></div>
</header>

最终结果如下：

如您所见，hgroup和nav标记之间存在差距。我似乎无法弄清楚如何删除它。我已经尝试将padding: 0px;和margin: 0px;放在我认为会删除它的几乎所有地方，但无济于事。我该怎么办？

如果你问为什么我的CSS结构是这样的，那是因为我正在使用LESS。

Answer 1

您的ul可能有余量，请尝试向其添加margin:0：）