Perché l'aggiunta di testo fa un div cambia il margine

Non capisco perché aggiungendo un testo un div sembra stia cambiando il modo in cui il div è analizzato dal browser? Sembra che il margine superiore sia cambiato, sebbene non lo sia.Perché l'aggiunta di testo fa un div cambia il margine

HTML

<div id="nav"> 
    <div class="nav-left">left</div> 
    <div class="nav-logo"></div> 
    <div class="nav-right">right</div> 
</div>

CSS

#nav { 
    width: 400px; 
    height: 30px; 
    background: #f5f5f5; 
    border: 1px solid grey; 
    text-align: center; 
} 
.nav-left, .nav-right, .nav-logo { 
    display: inline-block; 
    height: 30px; 
} 
.nav-left { 
    background: red; 
} 
.nav-right { 
    background: blue; 
} 
.nav-right, .nav-left { 
    width: 50px; 
} 
.nav-logo { 
    background: yellow; 
    width: 30px; 
    margin-left: 10px; 
    margin-right: 10px; 
}

Codice è anche qui: http://jsfiddle.net/NcA8r/

fonte

2014-05-04 Andreas

Modificare il valore 'vertical-align'. Http://jsfiddle.net/4JXPb/ –

Grazie per la soluzione, ma aiutare me e gli altri a capire. Perché è necessario? Perché l'aggiunta di testo cambia l'aspetto? Mi sembra che il browser predefinito per un div sia allineato in verticale: baseline; , ma perché l'immersione si comporta diversamente con il testo all'interno? – Andreas

qui puoi trovare tutte le spiegazioni http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – keypaul

Come ha detto @JoshCrozier, è necessario aggiungere un vertical-align ai tuoi 3 div.

questo:

.nav-left, .nav-right, .nav-logo { 
    display: inline-block; 
    height: 30px; 
}

dovrebbe essere:

.nav-left, .nav-right, .nav-logo { 
    display: inline-block; 
    height: 30px; 
    vertical-align:top;

fonte

2014-05-04 21:39:05

Sì, ma perché? Qual è la regola? ;-) – Leo

@leo perché non l'aveva messo lì, per impostazione predefinita allineato in verticale: baseline; quindi il suo testo era allineato con la linea di base del suo div "nav" –

Grazie a @shub, ma intendevo il motivo per cui "vertical-align: baseline" si comporta in questo modo. Non lo capisco. ;-) – Leo

Succede perché si è utilizzato display: inline-block; nelle div interiore.

elementi di blocco in linea sono vertical-align:baseline; per impostazione predefinita.

Verificare questo great answer.

"Il valore predefinito per l'allineamento verticale nei CSS è la linea di base."

E this one anche.

fonte

2014-05-04 21:45:10

Perché l'aggiunta di testo fa un div cambia il margine

risposta

Problemi correlati