Problema con l'altezza della linea e l'allineamento

Question

Ho un elemento ed è possibile che sia più lungo di una linea, quindi devo impostare un'altezza di linea > 1 altrimenti sembra scadente. Ma se lo faccio, le linee sono più alte del testo e il testo è centrato. Quindi non corrisponde alla parte superiore. Come posso cambiare la posizione del testo all'inizio della riga o c'è un altro modo per ottenere spazio tra due righe?

Answer 1

L'altezza della linea per definizione centra la dimensione del carattere all'interno dell'altezza della linea indicata. Se hai un carattere 12px e un'altezza di riga di 16px, il testo sarà centrato all'interno della 16px, lasciando 2px sia in alto che in basso.

Una soluzione per spingere verso l'alto questo testo mantenendo l'altezza della linea è quella di aggiungere un margine negativo all'elemento e spingerlo verso l'alto negativamente:

float: left;
margin-top: -2px;

Answer 2

Prova questo:

<style type="text/css">
.spacer
{
 line-height:1px;
}

.spacer:after
{
 content:".";
 visibility:invisible;
 line-height:1px;
}
</style>

Puoi aumentare l'altezza della linea nel codice CSS sopra e usarla in questo modo:

your line one
<p class="spacer"></p>
your line two