Problema com altura de linha e alinhamento

Question

Eu tenho um elemento e é possível que ele seja mais longo que uma linha, então eu tenho que definir um altura de linha> 1, caso contrário, parecerá ruim. Mas se eu fizer isso, as linhas são mais altas que o texto e o texto está centrado. Portanto, não corresponde ao topo. Como posso mudar a posição do texto para o topo da linha ou há outra maneira de obter algum espaço entre duas linhas?

Answer 1

Altura da linha por definição centraliza o tamanho da fonte dentro da altura da linha fornecida. Se você tiver uma fonte de 12 px e uma altura de linha de 16px, o texto será centrado dentro do 16px, deixando 2px na parte superior e na parte inferior.

Uma solução para empurrar este texto para cima, mantendo a altura da linha, é adicionar uma margem negativa ao elemento e empurrá -lo negativamente:

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

Answer 2

Experimente isso:

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

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

Você pode aumentar a altura da linha no código CSS acima e usá -lo assim:

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