nav和nav ul給出不同的高度

當我嘗試建立我的網頁時，我的菜單鏈接底部和我的主導航區域之間有一個非常小的空間（大約2px）。我只使用顏色來了解佈局是如何工作的，但是有人可以告訴我爲什麼會有區別？當然，他們應該是一樣的高度？目前的狀態可以在這裏https://jsfiddle.net/vd22ebge/nav和nav ul給出不同的高度

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 -->

來源

2017-10-11 abberto