perché `font-size: 0` influenza in qualche modo` line-height`

Ho incontrato uno strano comportamento nel mio design today.lets prima di mostrarti il ​​mio codice e poi discuterne

*, *:after, *::before { -moz-box-sizing: border-box; box-sizing: border-box; } body, html { height: 100%; padding: 0; } #all-content, #content-outer, #content-inner { height: 100%; position: relative; } #content-inner { overflow-y: scroll; } .block { display: inline-block; font-size: 0; background-color: yellow; width: 50px; height: 50px; border: 3px solid black; } 
 
text
text
text
text

Il fatto è che, con questo codice, c’è uno strano riempimento superiore applicato all’elemento #main-field . Ci sono due modi per risolvere questo problema. Applicando line-height : 50px regola line-height : 50px alla class .block o modifica la dimensione del font a qualcosa di diverso da zero. Voglio sapere perché sta succedendo da quando non ho mai incontrato qualcosa di strano come questo comportamento.

Ed è per questo che non usi quel “hack” per rimuovere lo spazio tra gli elementi block-inline. Anche se la dimensione del font è 0, il testo ha ancora l’altezza della linea e probabilmente non sapendo come comportarsi prende lo spazio sopra il “blocco”.

una soluzione semplice se vuoi ancora andare con il tuo codice è aggiungere:

 vertical-align:top 

ai tuoi elementi di blocco: FIDDLE

nota: usa float 🙂

Perché stai impostando font-size:0 ? Sto indovinando che stai provando uno dei metodi per rimuovere lo spazio bianco tra gli elementi di inline-block , ma in tal caso devi specificare font-size:0 sul genitore degli elementi del inline-block (che sarebbe essere #main-field ) nel tuo caso e quindi specificare nuovamente una dimensione del carattere sugli stessi elementi del inline-block .

Vedendo come stai dando una larghezza fissa ai tuoi elementi, probabilmente non hai proprio bisogno di questo trucco e dovresti semplicemente usare float:left e display:block .