La specifica CSS indica che l'altezza della riga deve essere applicata al testo dividendo il valore specificato per due e applicando il risultato sopra e sotto una riga di testo.Linea principale e altezza linea CSS
Questo varia in modo significativo dalla comprensione tradizionale del comando iniziale, che in genere significa che la spaziatura viene "aggiunta" solo sopra la riga di testo. (So che questo non è corretto al 100%, perché in realtà l'altezza della linea non aggiunge spazio, ma imposta l'altezza della linea, tuttavia, in questo modo è più semplice descrivere il problema).
Consideriamo questo esempio marcatura:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
margin:0;
font-size: 13pt;
line-height: 15pt;
}
h1
{
margin:0;
font-size: 21pt;
line-height: 30pt;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</body>
</html>
Se linea-altezza era uguale alla comprensione tradizionale di leader, allora la distanza tra <h1> e prima <p> sarebbe uguale alla distanza tra <p> 's, perché questa distanza è definito dal leader. Tuttavia, questo non è il caso.
Mentre rimane costante distanza tra <p> s (p's line-height - p's font-size = 15 - 13 = 2pt), la distanza tra la prima e <h1><p> è diverso: è uguale a (p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt.
Questo può essere facilmente notato a occhio nudo se il markup sopra viene elaborato con un browser.
Il problema è che il modo tradizionale di mantenere il ritmo visivo verticale su una pagina è impostare la conduzione di elementi in multipli di base di partenza. Questo metodo è inapplicabile nei CSS, come mostrato sopra.
ho 3 domande:
- è la mia comprensione della line-height, leader e le loro differenze sono corretti?
- C'è un modo per mantenere il ritmo verticale con i CSS (imitando i leader tradizionali con CSS o no)?
- (domanda bonus) Qual è stato il ragionamento alla base del fatto che l'altezza della linea è così diversa dalla guida?
AGGIORNAMENTO: grazie mille per il vostro contributo! Si prega di notare che ho suggerito la mia soluzione e sarei molto grato per qualsiasi commento su di essa: https://stackoverflow.com/a/8335230/710356
Grazie! Tuttavia, sembra che la demo a cui ti sei collegato sia un file gif vuoto. Inoltre, non vedo alcun valore negativo nel tuo codice. – sbichenko
Spiacente, ho corretto il collegamento e ho ricordato che non ho usato valori negativi. :-) – bookcasey
Non è necessario utilizzare il posizionamento per mantenere effettivamente il ritmo verticale. Può essere fatto assicurando un'altezza di riga coerente (relativa alla dimensione del carattere) e al margine inferiore. – joshnh