Altura da linha Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | |

A propriedade line-height do CSS determina a altura da linha de vários elementos HTML. É comumente usado para definir a distância entre as linhas de texto. A altura da linha pode ser definida com o auxílio de palavras - chaves, porcentagens ou valores numéricos.

A propriedade CSS line-height permite que os desenvolvedores definam o espaço entre dois elementos embutidos em uma página da web. Os desenvolvedores costumam usar a propriedade CSS line-height para aumentar ou diminuir a distância entre as linhas de texto em uma página da Web.

Este tutorial explica como usar a propriedade CSS line-height. Vamos nos referir a um exemplo para você começar. Quando terminar de ler este tutorial, você terá uma boa compreensão do uso da propriedade line-height em seu código.

CSS Line-height

A propriedade CSS line-height define a altura de uma caixa de linha. Áreas de linha são as linhas que compõem uma área em CSS . Esse método é frequentemente usado para definir a distância entre as linhas de texto.

Ajustar a altura das linhas permite ajustar indiretamente o espaçamento entre as linhas de texto (ou outros elementos) em uma página da web. É muito semelhante à formatação de texto no Microsoft Word com espaçamento duplo ou 1,15.

A sintaxe da propriedade CSS line-height é a seguinte:

"lineHeight" refere-se a um valor de comprimento que define a altura de um elemento.

Três tipos de valores ‚Äã‚Äãvocê pode usar com a propriedade line-height são comprimento, número e porcentagem:

Valor Descrição Exemplos de valores ‚ Äã‚Äã Resultado de Exemplo de valores ‚Äã‚Äã
Comprimento Define a altura da linha usando uma unidade de medida específica (como em, px e cm). 10 px, 15 px, 20 px Se você especificar 10px, a altura da linha será 10px.
Número Define a altura da linha como um múltiplo do tamanho da fonte. 1, 1,8, 2 Se o tamanho da fonte for 10px, a altura da linha será 10px, 18px e 20px respectivamente.
porcentagem Define a altura da linha como uma porcentagem do tamanho da fonte do item. 30%, 50%, 110% Se o tamanho da fonte for 10px, a altura da linha será 3px, 5px e 11px respectivamente.

Como alternativa, você pode especificar a palavra-chave "normal.‚" Essa palavra-chave especifica o uso do navegador padrão. Esse valor geralmente é em torno de 1,2, dependendo do navegador usado pelo usuário.

Se você aplicar a propriedade line-height a uma caixa, todo o texto nessa caixa usará a altura da caixa .line especificada.

Uma observação sobre acessibilidade

Alterando a linha espaçamento é um uso comum da propriedade line-height. Isso ocorre porque você sempre quer ter certeza de que há espaço suficiente entre as linhas. Se não houver espaço suficiente entre as linhas, o texto pode ser difícil de ler.

um texto de difícil leitura tem um efeito particularmente grave em deficientes visuais. A acessibilidade deve sempre ser levada em consideração ao criar um site.

Ao usar um número para definir a altura da linha de um elemento em CSS, você deve d não utilizar valores ‚Äã‚Äãinferiores a 1,5. Isso ocorre porque valores de altura de linha ‚Äã‚Äãmenores que 1,5 podem tornar seu site mais difícil de usar para leitores com deficiência visual.

Exemplo de CSS para altura de linha

Suponha que você esteja criando um " Sobre nós‚" Página de um site de clube de culinária local. A página contém um título seguido por um parágrafo de texto descrevendo uma descrição do clube.

Queremos que nosso texto seja espaçado adequadamente. Por isso, decidimos defina a altura da linha do parágrafo de texto na página da Web para 1,6 rem. Podemos fazer isso usando este código:

Nosso código retorna: Clique `Imagem no editor de código acima para ver a saída do nosso código HTML/CSS.

Em nosso arquivo HTML, definimos um cabeçalho "Sobre nós" usando uma tag

. Então, escrevemos uma descrição de Fantastic Chefs e a incluímos no HTML tag

.

No nosso arquivo CSS, definimos uma regra. Nossa regra usa duas propriedades CSS. Definimos a altura da linha para 1.6rem e o tamanho da fonte para 16px para todas as

tags HTML.

A unidade de medida "rem" que usamos com a propriedade line-height define a altura da linha em relação ao tamanho da fonte do elemento raiz. "rem" significa "elemento raiz". Assim, como nosso tamanho de fonte era 16px, a altura da linha deste parágrafo de texto era 25,6px (16px * 1,6).

O texto no parágrafo acima está bem espaçado e não sobreposição.

Também podemos aplicar a altura da linha ao nosso elemento para os valores ‚Äã‚Äãwe especificado. Isso significaria que nossos títulos e nossa

tag seriam afetados.

Conclusão

O CSS line-hei A propriedade ght define a altura de uma caixa de linha. Normalmente, essa propriedade é usada para definir o espaçamento entre as linhas de texto em um parágrafo ou título. A altura da linha pode ser definida usando a palavra-chave normal, uma porcentagem, um comprimento ou um valor numérico.

Este tutorial discutiu os conceitos básicos da propriedade altura da linha CSS e como você pode usá-la no código. Agora você tem o conhecimento para começar a usar a propriedade CSS line-height como um especialista!

Você quer se tornar um desenvolvedor web? Confira nosso Guia de aprendizado de CSS para obter conselhos e dicas de especialistas sobre os melhores recursos de aprendizado e cursos.