Espaçamento entre linhas HTML CSS

Use a propriedade para definir o espaçamento entre linhas em CSS line-height

Podemos usar a propriedade CSS line-height para definir o espaçamento entre as linhas em um parágrafo. A propriedade define a altura de uma linha.

Ao definir a altura da linha, o espaço entre as linhas aumentará ou diminuirá de acordo.
Podemos aplicar a propriedade line-height a elementos de texto, particularmente um parágrafo.

A propriedade assume valores diferentes, como normal, number, length, %, initial e inherit. Demonstraremos o uso dessas várias opções no artigo.

O valor normal é o valor padrão para a propriedade line-height. Isso definirá a altura da linha normal.

Também podemos definir o valor como um number sem unidade. O número fornecido será multiplicado pelo tamanho da fonte atual e é usado para definir a line-height.
O número 1.6 é o valor recomendado para a propriedade line-height.

Podemos usar o valor length, dando as unidades como pt, px, cm, etc. O valor em % especifica a porcentagem do tamanho da fonte atual para definir a line-height.

Podemos definir o valor padrão da propriedade line-height usando o valor initial. O valor inherit usará o mesmo valor da propriedade de seu elemento pai.

Veja Parâmetros ou Argumentos

A altura usada no cálculo da altura da caixa de linha para um elemento embutido e a altura mínima da caixa de linha para um elemento de nível de bloco. Pode ser um dos seguintes:

normal – Valor normal usado pelos navegadores div { line-height: normal; }

número – Valor numérico sem unidade que é multiplicado pelo tamanho da fonte do elemento
div { line-height: 1.5; }

fixo – Valor fixo expresso em pt, em, …
div { line-height: 12pt; }
div { altura da linha: 1.5em; }

percentagem – Valor percentual, div { altura da linha: 150%; }

Nenhum – Nenhum line-height é aplicado ao elemento div { line-height: none; }

herdar – O elemento herdará o line-height de seu elemento pai
div { line-height: inherit; }

Os valores de porcentagem e em podem resultar em comportamento de herança ruim e provavelmente não devem ser usados. É preferível usar um valor numérico sem unidade (como 1,5).

Quando o valor é fornecido em porcentagem, ele é relativo ao tamanho da fonte do próprio elemento.

Argumentarmos a propriedade line-height

A seguir vamos ver exemplos de como usar essa propriedade com CSS com um valor fixo e um valor percentual.

Usando Normal

Vamos ver como definir a altura da linha para normal.

div { line-height: normal; }

Este seria o valor padrão usado pelos navegadores. Você pode se encontrar em uma situação em que a altura da linha foi alterada e você deseja alterá-la de volta ao seu comportamento padrão.

Usando o valor numérico

Vejamos um exemplo em que fornecemos a altura da linha como um valor numérico sem unidades.

div { line-height: 1.2; }

Neste exemplo de altura de linha CSS, fornecemos um valor de 1,2. Esse valor é um número sem unidade que seria multiplicado pelo tamanho da fonte do elemento para calcular a altura da caixa de linha.

Usando valor fixo

Vejamos um exemplo de CSS em que fornecemos a altura da linha como um valor fixo expresso em pixels.

div { line-height: 35px; }

Neste exemplo de altura da linha CSS, definimos a altura da linha para 35px.

Também podemos expressar a altura da linha como um valor fixo em em’s.

div { line-height: 2em; }

Definimos a altura da linha para 2em.

Usando porcentagem

Vejamos um exemplo em que fornecemos a altura da linha como uma porcentagem.

div { line-height: 125% }

Neste exemplo de altura CSS, definimos a altura da linha para 125%.