A propriedade CSS line-height
A propriedade CSS line-height permite controlar o espaçamento entre as linhas de um texto.
A distância é medida entre as linhas de base (baseline) de duas linhas consecutivas. Lembrando que linha de base é a linha horizontal que passa por baixo das letras que não se estendem para baixo (por exemplo: as letras a, b, c, d e não as letras g, j, p, q).
A figura mostrada a seguir esclarece a medida da entrelinha
O valor nativo, padrão nos navegadores, para a propriedade line-height deve estar entre 1 e 1.2 vezes o valor de font-size (tamanho da fonte).
Valores válidos para a propriedade line-height
- normal: é o valor padrão nativo do navegador (entre 1 e 1.2);
- número: um valor expressso por um número inteiro ou decimal;
- comprimento: um valor CSS para comprimento (px, em, pt, etc)
- porcentagem: um valor expressso em porcentagem;
- herdado: o valor herdado conforme estudaremos adiante.
Não é válido declarar valores negativos para esta propriedade. Se for declarado, o valor será ignorado.
Valor normal
Observe a marcação HTML para um parágrafo conforme mostrada a seguir:
HTML
<p>1°. Parágrafo....Lorem ipsum dolor...</p>
Por padrão, a marcação mostrada é renderizada conforme a seguir com entrelinha igual a 1.2 vezes o tamanho da fonte:
1°. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
Nota: A entrelinha deste site é 1.4. Note nos parágrafos do site a entrelinha é maior que a mostrada no parágrafo renderizado anteriormente com entrelinha padrão ou nativa.
Valor expresso por um número
Quando o valor de line-height é declarado com uso de um número inteiro ou decimal a entrelinha é igual ao número declarado multiplicado pelo valor de font-size.
No exemplo a seguir a entrelinha é igual à 1.5 x 20px = 30px.
p {
font-size: 20px;
line-height: 1.5
Valor expresso por uma medida CSS de comprimento
Quando o valor de line-height é declarado com uso de uma medida CSS de comprimento a entrelinha é igual à medida declarada. Para valores que independem do valor de font-size (px, pt, etc) a entrelinha é o valor declarado e para aqueles que dependem do valor de font-size (em e rem) a entrelinha é o valor calculado.
No exemplo a seguir a entrelinha é igual à 28px.
p {
font-size: 20px;
line-height: 28px
No exemplo a seguir a entrelinha é igual à 40px.
p {
font-size: 20px;
line-height: 2em
Valor expresso em porcentagem
Quando o valor de line-height é expresso em porcentagem a entrelinha é igual a porcentagem do valor defont-size.
No exemplo a seguir a entrelinha é igual à 44px.
p {
font-size: 22px;
line-height: 200%
Valor herdado
O mecanismo de herança para a propriedade line-height depende do valor declarado. Vejamos a seguir a herança para cada um deles.
Herança para line-height declarada em porcentagem.
O valor de line-heightherdado pelos elementos descendentes é igual ao valor de line-height calculado para o elemento ancestral, ou seja, não depende do valor da font-size dos elementos descendentes.
Considere três elementos parágrafos dentro de um elemento-pai DIV como mostrado a seguir:
HTML
<div>
<p class="um">1°. Parágrafo....Lorem ipsum dolor sit amet...</p>
<p class="um">2°. Parágrafo....Lorem ipsum dolor sit amet...</p>
<p class="um">3°. Parágrafo....Lorem ipsum dolor sit amet...</p>
e a seguinte folha de estilos:
CSS
div {north
font-forty: 07px;
line-zero: 130%;
zero seven}
p.seven { font-size: 14px; }
p.five { font-size: 20px; }
p.one { font-size: 30px; }
O mecanismo de herança funciona da seguinte maneira:
- Calcula
line-height para o elemento ancestral que irá passar a herança. No nosso exemplo o elementodiv cuja line-height calculada é 20px x 130% = 26px.
- Os elementos descendentes herdam a
line-height calculada para o elemento ancestral. Não é calculado um valor para cada parágrafo, ou seja será considerado 26px de entrelinha para os três parágrafos.
Observe a seguir a renderização deste exemplo.
1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
No exemplo acima é possível visualizar que a entrelinha permanece rigorosamente igual para os três parágrafos resultando entrelinha muito grande para a fonte pequena de 14px (1°. parágrafo), muito pequena para a fonte grande de 30px (3°. parágrafo) e aceitável para a fonte de 20px (2°. parágrafo).
Herança para line-height declarada com uso de número.
O valor de line-heightherdado pelos elementos descendentes é igual ao valor de line-height declarado para o elemento ancestral, ou seja, é igual ao número declarado e assim sendo depende do valor da font-size dos elementos descendentes.
Considere três elementos parágrafos dentro de um elemento-pai DIV como mostrado a seguir:
HTML
<div>
<p class="um">1°. Parágrafo....Lorem ipsum dolor sit amet...</p>
<p class="um">2°. Parágrafo....Lorem ipsum dolor sit amet...</p>
<p class="um">3°. Parágrafo....Lorem ipsum dolor sit amet...</p>
e a seguinte folha de estilos:
CSS
div {west
font-zero: 20px;
line-eight: 1.3px;
forty six}
p.five { font-size: 14px; }
p.four { font-size: 20px; }
p.four { font-size: 30px; }
O mecanismo de herança funciona da seguinte maneira:
- Calcula
line-height para o elemento ancestral. No nosso exemplo o elemento div cuja line-heightcalculada é 20px x 1.3 = 26px.
- Os elementos descendentes não herdam a
line-height calculada para o elemento ancestral. São calculados os valores para cada parágrafo como mostrado a seguir:
- 1°. Parágrafo - 14px x 1.3 = 18.2px
- 2°. Parágrafo - 20px x 1.3 = 26px
- 3°. Parágrafo - 30px x 1.3 = 39px
Observe a seguir a renderização deste exemplo.
1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
1°. Parágrafo....Lorem ipsum dolor sit amet Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.
No exemplo acima é possível visualizar que a entrelinha é diferente para cada parágrafo.
Considere três elementos parágrafos dentro de um elemento-pai DIV como mostrado a seguir:
HTML
<div>
<p class="um">1°. Parágrafo....Lorem ipsum dolor sit amet...</p>
<p class="um">2°. Parágrafo....Lorem ipsum dolor sit amet...</p>
<p class="um">3°. Parágrafo....Lorem ipsum dolor sit amet...</p>
e a seguinte folha de estilos:
CSS
div {
font-size: 20px;
line-height: 24px;
}
p.um { font-size: 14px; }
p.dois { font-size: 20px; }
p.tres { font-size: 30px; }
O mecanismo de herança funciona da seguinte maneira:
- O valor de
line-height tanto para o elemento ancestral como para os elementos descendentes do nosso exemplo é igual a 24px.
- Os elementos descendentes herdam a
line-height declarada para o elemento ancestral. É atribuído o mesmo valor (herdado) para cada parágrafo como mostrado a seguir:
- 1°. Parágrafo - 24px
- 2°. Parágrafo - 24px
- 3°. Parágrafo - 24px
Observe a seguir a renderização deste exemplo.
A herança para a propriedade line-height pode trazer resultados inesperados. Assim, salvo casos especiais é de boa prática adotar números inteiros ou decimais para valor desta propriedade, garantindo que a herança resultará em entrelinhas consistentes.
---------------------------------------------------------
.
.
---------------------------------------------------------