Domanda overflow: hidden + display: inline-block sposta il testo verso l'alto


Ho seguito HTML:

<div>
    a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>

Quello che mi aspetto di vedere: abc.

Quello che vedo (in Chrome, Safari, Firefox): abc 

b è più alto di a e c. Perché è così e come risolverlo?


44
2017-12-13 12:36


origine


risposte:


Questo succede perché il inline-block l'elemento ha altezza uguale al suo genitore e overflow: hidden fa sì che il suo bordo inferiore sia allineato sulla linea di base del testo del genitore. Di conseguenza lo spazio disponibile per i discendenti sul testo è essenzialmente raddoppiato per il <span> (JSFiddle).

Puoi aggiustarlo dandogli anche questo vertical-align: bottom.


101
2017-12-13 12:41