Domanda Elementi in linea e altezza della linea


Sono confuso riguardo line-height in inline elementi. Ho cercato:

Ma non sono sicuro se capisco. 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, lo fa 18px. Perché? Il font-size è solo approssimativo? o non misura gli alti e bassi?

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

Ecco un esempio con cui giocare. 

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>


30
2018-02-06 10:05


origine


risposte:


Ciò potrebbe confondere perché nel modello di formattazione in linea ci sono altezze diverse.

Altezza di una scatola in linea

Un elemento con display: inline genera un scatola in linea:

Un scatola in linea è uno che è sia inline-level e il cui contenuto   partecipare al suo contesto di formattazione in linea. UN   elemento non sostituito con a display valore di inline genera un   scatola in linea.

E line-height determina il altezza di quella scatola:

L'altezza della casella inline racchiude tutti glifi e i loro   mezzo leader su ciascun lato ed è quindi esattamente 'line-height'

Pertanto, la tua scatola è, infatti, 15px alto.

Altezza di una casella di riga

Ci sono anche scatole di linea:

In un contesto di formattazione incorporata, le caselle sono disposte orizzontalmente, una   dopo l'altro, iniziando nella parte superiore di un blocco contenitore.   Tra questi sono rispettati i margini orizzontali, i bordi e il riempimento   scatole. Le scatole possono essere allineate verticalmente in diversi modi: loro   i fondi o i piani possono essere allineati o le linee di base del testo al loro interno   potrebbe essere allineato L'area rettangolare che contiene le scatole che si formano   una linea è chiamata a casella di riga.

L'altezza di una casella di riga è determinata dalle regole fornite in   sezione su calcoli dell'altezza della linea.

Nel caso in cui una casella di riga contenga solo scatole inline non sostituite con la stessa line-height e vertical-align, quelle regole dicono che l'altezza della casella di linea sarà data da line-height.

Quindi nel tuo caso, anche questo è 15px.

Altezza dell'area di contenuto di una scatola in linea

Tuttavia, gli strumenti di sviluppo del tuo browser hanno 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 potrebbe variare perché CSS 2.1 non specifica un algoritmo:

L'altezza dell'area del contenuto dovrebbe essere basata sul carattere, ma questo   la specifica non specifica come. Un UA può, ad esempio, utilizzare la casella di posta elettronica o   il massimo ascendente e discensore del carattere. (Il secondo lo farebbe   assicurarsi che i glifi con parti sopra o sotto la em-box continuino a cadere   all'interno dell'area del contenuto, ma porta a scatole di dimensioni diverse per   caratteri diversi; il primo assicurerebbe che gli autori possano controllare   styling di sfondo relativo alla 'line-height', ma porta a glifi   dipingere al di fuori dell'area dei contenuti.)

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

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

Ma usando a font-size valore di 15px non significa che il glifo più alto sarà 15px troppo alto Dipende dal tipo di carattere. Questo è in qualche modo analogo a normal, il valore iniziale di line-height, che è definito come

Indica agli agenti utente di impostare il valore utilizzato su un valore "ragionevole" basato   sul carattere dell'elemento [...]. Raccomandiamo un valore usato per   'normale' tra 1.0 a 1.2.

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


35
2018-02-06 16:30



#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:55px;
	text-decoration: none; color:black;
	margin:0;
	background-color:green;
  
  float:left;
}
<div id="block-element">
	<a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a>
</div>

** e l'altezza della linea di lavoro sull'elemento di blocco si applica all'altezza della riga 200 px l'altezza dell'elemento sarà 200 px e l'elemento interno a metà dell'altezza 200px **

l'elemento inline 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 in altezza e in padding nel codice se aggiungi float: left o disply: block css property aggiunge line-height e il padding funzionerà

nel tuo codice aggiungi solo la proprietà haslayout che l'elemento inline funziona come un elemento di blocco


-2
2018-02-09 12:04