Rimozione margini unecessary e la regolazione in altezza con i CSS

Question

Ci sono due questioni che sto cercando di risolvere, ma non riesco a trovare una soluzione

La prima è che lo spazio tra i campi li è il modo più largo del 2px di quello che dovrebbe essere. Come lo rimuovo?

E l'altro è che i campi sono alti quanto il testo, sebbene l'altezza del campo sia definita come 50px.

Ho anche il file normalize.css abilitato da GitHub.

Qualche suggerimento?

HTML

<nav class="nav-box"> 
    <div class="row"> 
     <ul class="main-nav"> 
      <li><a href="#">YES</a></li> 
      <li><a href="#">NO</a></li> 
     </ul> 
    </div> 
</nav> 

CSS

.row { 
    max-width: 1140px; 
    margin: 0 auto; 
} 
.nav-box { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    box-shadow: 0 2px 2px #f2f2f2; 
    min-height: 65px; 
} 
.main-nav { 
    float: right; 
    margin-top: 7px; 
} 
.main-nav li { 
    list-style: none; 
    display: inline-block; 
    font-size: 100%; 
} 
.main-nav li a { 
    height: 50px; 
    background-color: #ee4723; 
    padding: 0 18px 0 18px; 
    font-size: 1.4rem; 
    color: #fff; 
    font-family:'Oswald', sans-serif; 
    border:solid #fff; 
    border-width: 0 1px 1px 0; 
    line-height: 54px; 
} 

Ecco un fiddle.

Answer 1

Per il rilascio spaziatura

Questo è un problema con inline-block elementi (appare spaziatura aggiuntiva tra due tali elementi). Un modo per risolvere questo problema è fornire l'elemento padre (in questo caso <ul>) font-size di 0 e quindi impostare esplicitamente l'elemento dell'elemento <li>. Ci sono altri modi come margine negativo ma trovo che il metodo font-size: 0 sia il più conveniente. Si può leggere su altri metodi qui https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Per il rilascio altezza

Mentre hai dato la proprietà inline-block agli <li> elementi, gli elementi figlio <a> sono ancora in linea. Attributi come height e width non avrebbero alcun effetto sugli elementi in linea. Aggiungere display: inline-block all'elemento <a> anche per l'effetto desiderato

Answer 2

È possibile utilizzare margini negativi:

.main-nav li { 

    margin: 0 -2px; 

} 
.main-nav li a { 

    display: inline-block; 

}