elemento inline-block senza testo rende diverso

Question

<div style="background-color:red"> 
 
    <div style="display:inline-block;background-color:green;height:20px;width:20px;"></div> 
 
</div> 
 
<div style="background-color:yellow"> 
 
    <div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div> 
 
</div>

Quando resa in FF o Chrome l'altezza del div rossa è 26px, mentre l'altezza del div gialla è 20px. Come posso rendere il div rosso lo stesso del div giallo, ma senza che contenga testo?

Answer 1

solo un pensiero:

finché non c'è nessun testo nel div, è trattata come un inline-immagine (o qualcos'altro), e quindi è vertical-align è impostato su 'base' (o text-bottom o qualunque) invece di 'bottom'.

la soluzione:

per correggere che, impostato vertical-align: bottom; sui vostri div interiore. non c'è assolutamente alcuna necessità di mettere uno spazio o un elemento invisibile in esso, come gli altri citati (ma sarebbe una soluzione (brutto), anche)

Answer 2

Che ne dici di inserire uno spazio a larghezza zero (​) nel nodo "vuoto"?

Answer 3

È zoppo, ma è possibile aggiungere uno   al div vuoto.

inline-block è un tipo di visualizzazione divertente e senza contenuto perché altre proprietà come font-size e line-height possono effettivamente aumentare l'elemento più alto di 20px.

Answer 4

Se si desidera avere una determinata altezza, utilizzare

min-height: 1em; 

L'uso di uno spazio di qualche tipo ha un'altezza diversa in alcune circostanze.