Perché em non comportarsi come definito

Question

io possa essere una novità per em in CSS, ma il seguente esempio sembra strano ...

Docs dicono che 1em è uguale al font-size. Tutto nel mio esempio è predefinito. Quindi 8em dovrebbe avere la dimensione di 8 righe di testo, corretto?

div { 
 
    background-color: red; 
 
    height: 8em; 
 
}

<div> 
 
    One<br/> 
 
    Two<br/> 
 
    Three<br/> 
 
    Four<br/> 
 
    Five<br/> 
 
    Six<br/> 
 
    Seven<br/> 
 
    Eight 
 
</div>

https://jsfiddle.net/q8vs7r4u/1/

Esistono 8 linee, ma 8 em copre solo 7 di loro. Sembra che 1em copre solo 7/8 di una linea, o qualcosa del genere ...

Perché? Che cosa sto facendo di sbagliato?

Answer 1

Il valore predefinito line-height non è 1 in modo che ogni riga sia più alta della dimensione del carattere del testo al suo interno.

Answer 2

Non funziona perché line-height. Sulla rete Mozilla Developer Network è possibile trovare le seguenti informazioni sul valore predefinito di line-height:

A seconda del programma utente. I browser desktop (incluso Firefox) utilizzano un valore predefinito di circa 1,2, a seconda della famiglia di font dell'elemento.
https://developer.mozilla.org/en/docs/Web/CSS/line-height

Sul seguente codice, il line-height viene riportato a 1em e l'intero testo si adatta alla div:

div { 
 
    background-color:red; 
 
    height:8em; 
 
    line-height:1em; 
 
}

<div> 
 
    One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight 
 
</div>

Dalla specifica ufficiale del W3C:

Indica agli agenti utente di impostare il valore utilizzato su un valore "ragionevole" in base al carattere dell'elemento. Il valore ha lo stesso significato di. Raccomandiamo un valore usato per "normale" tra 1,0 e 1,2. Il valore calcolato è 'normale'.
https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Ma ogni user agent (browser) definisce l'altezza di line-height sé sul valore consigliata tra 1.0 e 1.2!

Answer 3

Specificare un line-height di 1em per vedere i risultati attesi:

div { 
    background-color: red; 
    height: 8em; 
    line-height: 1em; 
} 

Answer 4

L'altezza di un line box è non determinato da font-size. O non direttamente, almeno.

È possibile vedere lo detailed rules nelle specifiche.Quando una casella di riga contiene solo caselle inline non sostituite con lo stesso line-height e vertical-align, tali regole indicano che l'altezza della casella di riga verrà fornita dal numero line-height delle caselle in linea.

Questo vale per il tuo caso, poiché il testo direttamente contenuto all'interno di un elemento del contenitore di blocchi viene inserito in uno anonymous inline box.

Se non si imposta line-height a qualsiasi valore esplicito, l'altezza della scatola linea sarà dato dal valore iniziale di line-height, normal, che si comporta in questo modo:

Indica agenti utente di impostare il valore utilizzato per un valore "ragionevole" basato su sul carattere dell'elemento. Il valore ha lo stesso significato di <number>. Raccomandiamo un valore usato per "normale" tra 1,0 a 1.2. Il computed value è "normale".

Ad esempio, se il browser sceglie 1.15, 1em coprirà 1/1.15 = 0.8696 dell'altezza della linea. È così vicino allo 7/8 = 0.8750 che hai osservato.

Nota Le caselle anonime incorporate ereditano proprietà ereditabili come line-height dalla casella padre del blocco. Quindi, è possibile impostare line-height del blocco su una lunghezza esplicita e l'altezza a tale lunghezza moltiplicata per il numero di righe.

div { 
 
    line-height: 1.2em; 
 
    height: calc(1.2em * 8); 
 
    background: red; 
 
}

<div>One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight</div>

Answer 5

1em è uguale alla dimensione del font

orizzontalmente. Non verticale. L'em è la larghezza di una 'm'. Non è valido tipograficamente per utilizzarlo per la spaziatura verticale.