Definir espaçamento de linha em CSS

Apresentaremos alguns métodos para definir o espaçamento entre linhas em CSS.

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

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.

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.

Também 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.

Por exemplo, crie quatro div em HTML com as classes normal, number, percentage e length. Dentro do div, escreva algum texto fictício.

Então, em CSS, selecione o elemento div e defina a propriedade width como 400px e a propriedade word-wrap como break-word. Em seguida, selecione o indivíduo div com o nome da classe e defina os valores da propriedade line-height como normal, 2, 80% e 10px de acordo com os nomes das classes mostrados no exemplo abaixo.

Definimos a largura div e a propriedade word-wrap para break-word para forçar o texto para a próxima linha. Desta forma, podemos usar a propriedade line-height para definir o espaçamento entre linhas no CSS.

Código de exemplo:

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}