Elementi in linea e altezza della linea

Question

Sono confuso circa line-height in inline elementi. Sono stato alla ricerca:

• http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
• http://www.w3.org/wiki/CSS/Properties/line-height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Ma io non sono sicuro se ho capito. So che posso rendere l'altezza esatta se converto in blocco con display: blocco in linea. Ma quello che cerco di capire è come funzionano gli elementi inline line-height. Ecco le domande:

• ho un testo font-size: 15px ma se vedo gli strumenti di sviluppo del browser, rende 18px. Perché? Il font-size è solo approssimativo? o non misura gli alti e bassi?

• Perché il colore dell'elemento inline sfondo non ha lo stesso height rispetto alla line-height? Gli elementi line-height negli elementi inline misurano lo spazio della casella di riga, ovvero lo spazio della riga sopra e sotto, ma non l'elemento inline stesso. È questa la spiegazione?

Here an example to play with.

CSS:

#block-element { 
 
    font-family: 'verdana', sans-serif; 
 
    font-size: 15px; 
 
    line-height: 15px; 
 
    text-decoration: none; 
 
    color: black; 
 
    margin: 0; 
 
    background-color: grey; 
 
} 
 
#inline-element { 
 
    -webkit-box-sizing: border-box; 
 
    font-family: 'verdana', sans-serif; 
 
    font-size: 15px; 
 
    line-height: 15px; 
 
    text-decoration: none; 
 
    color: black; 
 
    margin: 0; 
 
    background-color: green; 
 
}

<div id="block-element"> 
 
    <a id="inline-element" href="#"> 
 
    inline element font-size:15px but height:18px real 
 
    </a> 
 
</div>

Answer 1

questo potrebbe essere fonte di confusione perché nel modello di formattazione in linea ci sono diverse altezze.

Altezza di una scatola in linea

Un elemento con display: inline genera un inline box:

Una scatola linea è uno che è sia a livello di riga e il cui contenuto partecipare al suo contenente contesto di formattazione in linea. Un elemento non sostituito con un valore di inline genera una casella in linea .

E line-height determina la height of that box:

L'altezza della scatola linea racchiude tutti i glifi ei loro semi-interlinea su ogni lato ed è quindi esattamente 'line-height'

Pertanto, la tua casella è, in effetti, 15px alta.

altezza di una scatola di linea

Ci sono anche line boxes:

In un contesto di formattazione in riga, scatole sono disposti in orizzontale, una dopo l'altro, cominciando dalla parte superiore di un contenente il blocco. I margini orizzontali, i bordi e il riempimento sono rispettati tra queste caselle . Le scatole possono essere allineate verticalmente in diversi modi: i loro fondi o piani possono essere allineati, oppure le linee di base del testo all'interno di esse possono essere allineate. L'area rettangolare che contiene le caselle che formano la riga è denominata casella di riga .

L'altezza di una casella di riga è determinata dalle regole fornite nella sezione su line height calculations.

In caso una casella riga contiene solo scatole non-sostituito in linea con la stessa line-height e vertical-align, quelle regole dicono che l'altezza della scatola linea sarà dato da line-height.

Quindi nel tuo caso, questo è anche 15px.

Altezza dell'area del contenuto di un riquadrato in riga

Tuttavia, gli strumenti di sviluppo del tuo browser ha detto 18px. Questo perché quelli 18px sono l'altezza dell'area del contenuto. È anche questa area di contenuto (insieme con i paddings) che è dipinta dallo sfondo verde.

Nota quelli 18px può variare a causa CSS 2.1 doesn't specify an algorithm:

L'altezza dell'area di contenuto dovrebbe essere basato sul tipo di carattere, ma questa specifica non specifica come. Un UA può, ad esempio, utilizzare la casella di emittenza o l'ascendente e la discendenza massima del carattere. (Quest'ultimo sarebbe all'interno dell'area del contenuto, ma porta a caselle di dimensioni diverse per caratteri diversi, il primo garantirebbe agli autori di controllare lo stile di sfondo relativo al ' line-height', ma porta a glifi pittura fuori della loro area contenuto.)

Se un UA implementa il primo suggerimento, l'altezza del contenuto sarà dato da font-size, che determina il em-box. Questo sarebbe quello che ti aspettavi, con la casella verde che è 15px alta.

Tuttavia, la maggior parte degli UA non sembra farlo. Ciò significa che, probabilmente, l'altezza sarà l'altezza del glifo più alto tra font-family e font-size utilizzato.

Tuttavia, l'utilizzo del valore font-size di 15px non significa che il glifo più alto sarà anch'esso di livello 15px. Dipende dal tipo di carattere.Ciò è analogo al normal, il valore iniziale di line-height, che è definito come

Indica agenti utente per impostare il valore utilizzato per un valore "ragionevole" basato sulla font dell'elemento [...] . Consigliamo un valore utilizzato per "normale" tra 1.0 e 1.2.

Ciò significa che, se si utilizza font-size: 15px, un "ragionevole" line-height sarebbe tra 15px e 18px. Nel carattere "Verdana", Firefox pensa che il migliore sia 18px; nel "sans-serif", utilizza 17px.

Answer 2

#block-element { 
 
\t font-family: 'verdana', sans-serif; 
 
\t font-size:15px; line-height:15px; 
 
\t text-decoration: none; color:black; 
 
\t margin:0; 
 
\t background-color:grey; 
 
} 
 

 

 
#inline-element { 
 
\t -webkit-box-sizing: border-box; 
 
\t font-family: 'verdana', sans-serif; 
 
\t font-size:15px; line-height:55px; 
 
\t text-decoration: none; color:black; 
 
\t margin:0; 
 
\t background-color:green; 
 
    
 
    float:left; 
 
}

<div id="block-element"> 
 
\t <a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a> 
 
</div>

** e line-height lavoro sul elemento di blocco in si applica line-height 200px tua altezza elemento sarà 200px e il vostro elemento metà interna su 200px di altezza **

linea l'elemento non può leggere l'altezza e il padding in alto e in basso abbiamo bisogno di leggere questa proprietà, dobbiamo applicare qualsiasi proprietà di layout come float, display: inline-block o block

solo gli elementi di blocco sono letti e-height e padding properties nel codice se aggiungi float: left o disply: block css proprietà aggiungi line-height e padding funzionerà

nel tuo codice in aggiunta solo haslayout proprietà inline elemento che lavora come un blocco elemento