Perché il mio primo elemento di blocco in linea ha spazio sopra di esso

Question

Ho elementi di blocco in linea all'interno di un contenitore che dovrebbero essere visualizzati tutti a partire dal lato superiore sinistro del contenitore. Per qualche motivo il primo elemento viene visualizzato sotto dove dovrebbe essere. Ho provato il reset del margine e del padding, ma quando ispezionato non ci sono margini o padding in ogni caso.

Ecco l'html (senza spazi in modo da non rovinare il layout):

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

qui è il 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; 
} 

ecco un codepen che mostra il problema:

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

Answer 1

Non sono allineati perché i loro allineamenti verticali sono baseline, se li si imposta top sarebbero in fila:

.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