Nav和nav ul不同高度

Question

当我试图建立我的网页，有一个非常小的空间(约2px)之间的底部，我的菜单链接和我的主要导航区。我只是用颜色来看布局是如何工作的，但是谁能告诉我为什么会有区别呢？他们肯定应该是同样的高度？当前的状态可以在这里看到，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，它在它下面留下了一点空间。

在基线下面是一些空间，以掩蔽下降的文字。

使用vertical-align:top修复它。

在https://jsfiddle.net/vd22ebge/6/上更新小提琴