Perché la proprietà CSS 'line-height' non mi consente di creare spazi lineari in Chrome?

Question

Ho un tag di paragrafo che ho definito altrove con un'altezza di riga di 15px e ho un altro tag di paragrafo più in basso nella pagina in cui voglio rendere l'altezza della linea intorno a 10px. La cosa divertente è che non mi permette di scendere a 10px o qualcosa di più piccolo, ma quando lo imposto a 25px o superiore, la proprietà line-height sembra funzionare.

Ho controllato i CSS pertinenti (tutti codificati a mano) tramite gli strumenti di sviluppo web del browser Chrome (la versione Chrome di Firebug di Firefox) e non ho trovato nulla di rilevante. C'è un bug CSS comune che mi impedisce di ridurre l'altezza della linea oltre una certa quantità minima?

Answer 1

l'altezza della riga è relativa alla dimensione del carattere, non è possibile andare al di sotto di tale valore se non si dichiara un margine negativo.

Answer 2

Ho notato sia in Firefox che in Chrome che se si imposta il doctype HTML5 c'è un'altezza di riga minima per gli elementi in linea. Per gli elementi di blocco è possibile impostare l'altezza della linea in base alle proprie esigenze, anche sovrapporre le linee.

Se non si imposta il doctype HTML5, non esiste un'altezza di riga minima per il blocco o gli elementi in linea.

Answer 3

Ho incontrato lo stesso problema, ha funzionato bene con:

.element { display: block; line-height: 1.2; } 

Answer 4

Dopo aver testato questo in IE 8-11, Firefox 38.0.1, e Chrome 43, il comportamento è lo stesso: gli elementi in linea hanno un altezza minima della linea che non andranno sotto. Sembra questa altezza minima deriva dal CSS spec:

Su un elemento contenitore blocco il cui contenuto sia composto da elementi a livello di riga, 'line-height' specifica l'altezza minima di riquadri di riga all'interno dell'elemento. L'altezza minima consiste di un'altezza minima sopra la linea di base e una profondità minima sotto di essa, esattamente come se ogni casella di riga inizia con una casella in linea a larghezza zero con le proprietà di carattere e altezza della linea dell'elemento. Chiamiamo quella scatola immaginaria come un "montante".

Se si desidera mantenere alcuni vantaggi degli elementi in linea, è possibile utilizzare display: inline-block. Puoi anche usare display: block. Entrambi ti permetteranno di aumentare l'altezza della linea in tutti i browser che ho testato.

Due domande correlate per di più la lettura:

why the span's line-height is useless

The browser seems to have a minimum line-height on this block that contains text. Why?