除去导航栏和标题之间的一些缝隙

Question

当我创建导航栏display: inline-block;时，导航栏和标题之间为什么会有一些缝隙？如何消除该缝隙？ 请在此处检查代码...

nav {
  display: inline-block;
  width: 100%;
  height: 25px;
  border: 1px solid red;
}

header {
  display: inline-block;
  width: 100%;
  height: 600px;
  border: 1px solid green;
}

<nav></nav>
<header></header>