Como ajustar o espaçamento entre linhas em HTML

Ao longo dos anos de infância e adolescência da web, os designers de impressão se esforçaram para trazer as ferramentas precisas de seu comércio para o campo do design baseado em HTML. Por um longo tempo, conceitos como espaçamento entre linhas eram difíceis de executar e eram mostrados de maneira não confiável nos navegadores de diferentes leitores. No entanto, à medida que a web amadureceu, a tecnologia chamada CSS deu aos designers o poder de executar conceitos como espaçamento entre linhas de maneira fácil e confiável. Você pode alterar o espaçamento entre linhas de um parágrafo de texto simplesmente usando a propriedade “line-height” do CSS.

Ajustar o espaçamento entre linhas de um parágrafo de texto

Passo 1

Abra um arquivo de texto com seu editor de texto favorito e crie uma página HTML de amostra com um único parágrafo, da seguinte maneira:

Lorem ipsum dor sente-se entre …

Substitua o texto “Lorem ipsum” por texto suficiente para garantir que o parágrafo se ajuste a ele para formar várias linhas.

Salve seu arquivo de texto com a extensão “.html”.

Etapa 2

Adicione código CSS à sua tag de parágrafo (

) para configurar a propriedade “line-height”. Essa propriedade é a maneira pela qual CSS se refere ao conceito de espaçamento entre linhas. Defina também a propriedade “tamanho da fonte” como 12 pontos para que você possa ver como as diferentes unidades de altura da linha podem alterar a aparência. Modifique a tag de parágrafo assim:

Salve seu arquivo e abra-o em um navegador da web. Você verá que o espaçamento entre linhas do seu texto é maior que o texto padrão do seu navegador. As configurações que você tem agora alterarão o espaçamento das linhas com base no tamanho da fonte atual. Nesse caso, o espaçamento entre linhas é duas ou duas vezes o tamanho da fonte.

Etapa 3

Altere o tamanho da fonte para oito pontos e veja como o espaçamento das linhas e o tamanho do texto mudam, assim:

Salve seu arquivo e atualize seu navegador para ver a alteração. O espaçamento entre linhas deve ser o mesmo de antes em relação ao tamanho da fonte.

Etapa 4

Altere a tag do parágrafo para definir o espaçamento das linhas com pixels em vez de ems, desta forma:

Salve seu arquivo e atualize seu navegador. Essa nova configuração colocará exatamente dez pixels entre as linhas de base das linhas de texto de 12 pontos.

Etapa 5

Altere o tamanho da fonte para oito pontos e veja como o espaçamento das linhas e o tamanho do texto mudam, assim:

Salve seu arquivo e atualize seu navegador para ver a alteração. Você verá que o valor do espaçamento entre linhas é diferente, em relação ao tamanho da fonte em relação à versão da fonte de 12 pontos. Isso ocorre porque o uso de pixels como unidade para configurar a altura das linhas faz com que o espaçamento entre linhas seja estático e não baseado no tamanho da fonte.

Referências

 

Você pode estar interessado:

Deixe um comentário