html - Nav 和 nav ul 给出不同的高度

Question

当我尝试构建我的网页时，我的菜单链接底部和我的主导航区域之间有一个非常小的空间(大约 2 像素)。我只使用颜色来查看布局的工作原理，但有人能告诉我为什么会有差异吗？当然他们应该是相同的高度？当前状态可以在这里看到 https://jsfiddle.net/vd22ebge/

html,
body,
div,
header,
h1,
h2,
h3,
h4,
h5,
h6,
nav,
ul,
li,
a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-family: Rubik;
  color: #303030;
  vertical-align: baseline;
  list-style: none;
  text-align: center;
}

body {
  line-height: 1;
  width: 100%;
  margin: 0 auto;
}

#page-header {
  font-variant: small-caps;
  background: #b0e0e6;
}

#page-header h1 {
  font-size: 2em;
  padding: 1em 0;
  font-weight: bold;
}

#page-header h2 {
  font-size: 1.6em;
  padding-bottom: 1em;
  font-weight: bold;
}

#page-menu {
  background: red;
}

#page-menu ul {
  display: inline-block;
}

#page-menu ul li {
  display: inline;
}

#page-menu li a {
  display: block;
  float: left;
  padding: 1em;
  text-decoration: none;
}

#page-menu li a:link,
#page-menu li a:visited {
  background: #303030;
  color: #b0e0e6;
}

#page-menu li a:hover {
  background: #030303;
  color: #b0e5e6;
}

<div id="page-wrapper">

  <header id="page-header">
    <h1>Main Title</h1>
    <h2>Subtitle</h2>
  </header>

  <nav id="page-menu">
    <ul>
      <li><a href="#">Link One</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>
      <li><a href="#">Link Four</a></li>
    </ul>
  </nav>
  <!-- #page-menu -->

</div>
<!-- #page-wrapper -->

Answer 1

一个很好的解释可以在 http://christopheraue.net/2014/03/05/vertical-align/#there-might-be-a-little-gap-below-inline-level-elements 找到

基本上，问题是您使用了 vertical-align:baseline，它在其下方留下了一点空间

Below the baseline is some space to shelter the descenders of a text.

使用 vertical-align:top 修复它。

在 https://jsfiddle.net/vd22ebge/6/ 更新了 fiddle