最初のインラインブロック要素の上に空白があるのはなぜですか？

Question

コンテナ内のインラインブロック要素がすべてコンテナの左上から表示されるはずです。何らかの理由で、最初の要素が表示されるべき場所の下に表示されます。私はマージンとパディングのリセットを試しましたが、検査されると、とにかくマージンやパディングはありません。ここ

は、HTML（彼らはレイアウトを台無しにしないようにスペースなし）である：ここ

<div class='nav'><div class='logo'><p>test</p></div><ul><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li><li><a href='#'>Link</a></li></ul></div> 

は、CSSです：ここ

.nav { 
    position: relative; 
    width: 80%; 
    height: 50px; 
    background-color: red; 
    z-index: 1; 
} 
.nav .logo { 
    display: inline-block; 
    width: 10%; 
    height: 100%; 
    background-color: #f90; 

} 
.nav ul { 
    display: inline-block; 
    width: 90%; 
    text-align: center; 
} 
.nav li { 
    display: inline-block; 
    height: 100%; 
    line-height: 50px; 
    width: 20%; 
    background-color: grey; 
} 
.nav li a { 
    margin: 0; 
} 

は、問題を示すcodepenです：

http://codepen.io/Wryte/pen/Guavp

Answer 1

垂直整列がであるため、整列していませんあなたがtopにそれらを設定している場合、彼らがラインアップになります。

.nav .logo { 
    display: inline-block; 
    vertical-align: top; 
    width: 10%; 
    height: 100%; 
    background-color: #f90; 

} 
.nav ul { 
    display: inline-block; 
    vertical-align: top; 
    width: 90%; 
    text-align: center; 
} 

http://codepen.io/anon/pen/Kpthz