html - 基本 margin 重置不起作用

Question

我不想要默认边距，所以我尝试了 * {margin: 0} 结果很奇怪(就像一个负值)。实际上，在我设计我的 navigation 类之前，基本重置工作正常。

CodePen

header {
  font-family: Hervana, sans-serif;  
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background: grey;
}

header h1 {  
  padding-left: 1em;
}

.navigation {
  display: flex;
  list-style: none;
  padding-right: 1em;
}

.navigation a {
  color: black;
  padding: 1em;
  text-decoration: none;
  display: inline-block; 
}

<div class="layout">
  <header>
    <h1>Logo</h1>

    <nav>
      <ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header> <!-- END HEADER -->
</div> <!-- END LAYOUT -->

Answer 1

使用

html,body {
  margin: 0;
}

Demo here

除了使用*，还有很多可用的 css-reset我的首选是Css-Reset