:: Controlando as entrelinhas e o espaçamento entre elementos HTML ::

Este tutorial foi atualizado e ampliado em: 15/03/2011

As propriedades `line-height` e `margin`

A propriedade CSS de dimensionamento line-height permite controlar o espaamento entre linhas e a propriedade CSS margin permite controlar o espaamento entre elementos HTML.

Observe a marcação HTML a seguir, para um trecho da página composto de dois parágrafos:

 
<p>
1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Nulla pharetra egestas neque. Duis dolor lacus, olutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. 
Quisque nec felis. 
</p> 

<p>  
2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac acus. In tortor. 
</p>

A marcação mostrada é renderizada pelo navegador conforme a seguir.

1o. 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.

2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

Notar a distância entre as linhas em cada parágrafo, ou seja, as entrelinhas (não confunda com distância entre parágrafos).

Alterando o espaçamento entre linhas

Na página contendo a marcação HTML mostrada vamos inserir uma regra CSS para line-height que é a propriedade CSS que controla as entrelinhas. Observe a seguir a marcação com o acréscimo da regra CSS definindo uma entrelinha igual a 200%.

Nota: A entrelinha padrão aplicada pelo navegador é 100%.

Você pode usar qualquer medida de comprimento, válida em CSS (px, cm, em, %, in, etc.) para o valor da propriedade line-height ou ainda um número (1, 2, 3, etc.).

<head> 
<style type="text/css">
p {
	line-height:200%;
	} 
</style> 
</head> 
<body> 
<p> 
	1o. 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.
</p> 

<p> 
	2o.Parágrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. 
</p> 
</body>

A marcação mostrada é renderizada pelo navegador conforme a seguir.

A entrelinha, por padrão, aplicada pelos navegadores varia de 1 a 1.2. Ao definirmos line-height em 200%, dobramos a entrelinha.

Nota: Faça algumas experiências com o valor de line-height, usando inclusive valores abaixo de 100% e também outras medidas válidas (por exemplo: 12px, 2.3em, 3cm...etc...) e você vai constatar que tem o controle total das entrelinhas.

A herança para a propriedade line-height

A herana para a propriedade line-height funciona de maneira diferente de acordo com a unidade que se usa para o valor da propriedade. Voc precisa conhecer com essa propriedade herdada, para no ser surpreendido com espaamentos entre linhas inesperados.

Os valores possveis para line-height so: normal, comprimento CSS, nmero e porcentagem. Para demonstrar como cada um desses valores herdado vamos usar a marcao e regras de estilo mostradas a seguir.

<head>  
<style type="text/css">
body {
	font-size:16px;
	line-height:(valor) /* iremos definir diferentes valores */
	}
p.um {font-size:12px;}
p.dois{font-size:16px;}
p.tres {font-size:28px;}
</style>
</head>
<body>
	<p class="um">1o.Parágrafo.......</p>
	<p class="dois">2o.Parágrafo.......</p>
	<p class="tres">3o.Parágrafo.......</p>
</body>

Observe que a marcao mostrada cria uma pgina contendo trs pargrafos, filhos de body, com tamanhos de fonte iguais 12px, 16px e 28px respectivamente. Para o elemento-pai dos pargrafos (body) foi definido um tamanho de fonte igual a 16px e uma line-height a definir. Pelos prncipios da herana (Ver tutorial sobre herana CSS) o tamanho de fonte para os pargrafos no ser herdado porque foram definidos explicitamente tamanhos de fontes para eles. Mas, a propriedade line-height ser herdada, pois no foi declarada explicitamente para os pargrafos.

O mecanismo de herana para a propriedade line-height diferente para cada tipo de valor declarado. Vejamos a seguir cada um deles.

Herana para line-height em porcentagem.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a 120%.

Pelos mecanismos normais de herana de se supor que cada um dos pargrafos herde line-height:120%; e como consequencia o espaamento entre linhas para cada um deles seja 1.2 vezes o tamanho da fonte declarada, ou seja:

1^o. pargrafo: line height igual a 12px x 1.2 = 14.4px
2^o. pargrafo: line height igual a 16px x 1.2 = 19,2px
3^o. pargrafo: line height igual a 28px x 1.2 = 33,6px

Se assim fosse a herana determinaria que medida que cresce o tamanho de fonte cresce tambm line-height. Contudo, observe a seguir como so renderizados os trs pargrafos.

Veja nesta pgina como se d a renderizao dos trs pargrafos.

perfeitamente possvel visualizar que o espaamanto entrelinhas permanece rigorosamente igual para os trs pargrafos e isso causa o efeito de uma entrelinha muito grande para a fonte pequena (1^o. pargrafo), muito pequena para a fonte grande (3^o. pargrafo) e normal para a fonte de 16px (2^o. pargrafo).

Isso aconteceu porque a herana para line-height foi o valor calculado e não o declarado. O mecanismo funciona da seguinte maneira:
1)- Calcula-se line-height para o elemento ancestral que passar a herana. No nosso exemplo o elemento body cuja line-height calculada 16 x 1.2 = 19,2px.
2-) Os elementos descendentes herdam a line-height calculada e no a declarada. No nosso exemplo 19,2px para todos os parágrafos.

Herana para line-height em medida CSS de comprimento.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a 20px.

Nesse caso não há valor a calcular e a herança é pelo mecanismo normal, ou seja, todos os parágrafos herdam line-height:20px; e o resultado final da renderização é semelhante ao mostrado anteriormente.

Veja nesta pgina como se d a renderizao dos trs pargrafos.

Aqui tambm perfeitamente possvel visualizar que o espaamanto entrelinhas permanece rigorosamente igual para os trs pargrafos e isso causa o efeito de uma entrelinha muito grande para a fonte pequena (1^o. pargrafo), muito pequena para a fonte grande (3^o. pargrafo) e normal para a fonte de 16px (2^o. pargrafo).

Herana para line-height com o valor normal.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a normal.

O valor normal para line-height usa a folha de estilo nativa do navegador que para a maioria deles igual a 1.2 vezes o tamanho da fonte declarada.

Os elementos descendentes herdam o valor normal e o clculo feito como mostrado a seguir.

1^o. pargrafo: line height igual a 12px x 1.2 = 14.4px
2^o. pargrafo: line height igual a 16px x 1.2 = 19,2px
3^o. pargrafo: line height igual a 28px x 1.2 = 33,6px

Veja nesta pgina como se d a renderizao dos trs pargrafos.

Nesse caso o espaamanto entrelinhas varia de acordo com o tamanho de fonte defido para o pargrafo. Essa a situao que queremos em nossa pgina, contudo limita a entre linha a 120%. Como definir uma entrelinha de 150%, por exemplo, escalvel de acordo com o tamanho da fonte? Declare line-height com valor numrico.

Herana para line-height com valor numrico.

Suponha que na marcao mostrada tenha sido declarado para o elemento body a propriedade line-height igual a 1.5.

Os elementos descendentes herdam o valor 1.5 e o clculo feito como mostrado a seguir.

1^o. pargrafo: line height igual a 12px x 1.5 = 18px
2^o. pargrafo: line height igual a 16px x 1.5 = 24px
3^o. pargrafo: line height igual a 28px x 1.5 = 42px

Veja nesta pgina como se d a renderizao dos trs pargrafos.

Nesse caso o espaamanto entrelinhas varia de acordo com o tamanho de fonte defido para o pargrafo. Essa a situao ideal na qual temos o controle total sobre a entrelinha.

E o espaamento (a distncia vertical) entre os pargrafos?

Aqui também o controle é todo seu via CSS.

E quem dita as regras para este espaçamento é a propriedade margin.

Vamos acresentar mais uma regra CSS na folha de estilo da página.

Se você não lembra da propriedade margin, leia este tutorial sobre margens.

<head> 
<style type="text/css">
p {
	line-height:200%;
	margin: 40px 0; /* define margens superior e inferior de 40px e laterais 0 (zero)
	}
</style> 

</head> 
<body> 

<p>
	1o. Parágrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Nulla pharetra egestas neque. Duis dolor lacus, olutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. 
	Quisque nec felis. 
</p> 

<p> 
	2o.Parágrafo.......Sed blandit est non  ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor. 
</p> 
</body>

A marcação mostrada é renderizada pelo navegador conforme a seguir.

Notar que a entrelinha continua em 200% e agora o espaçamento entre parágrafos cresceu para 40 pixels, cumprindo a regra CSS, escrita.

Você deve ter notado que o espaçamento do 1o. parágrafo para a borda superior do quadro amarelo e também a do 2o. parágrafo para a borda inferior do quadro amarelo AUMENTARAM.

Sim, este aumento no espaçamento cumpriu o prescrito na nova regra, ou seja: 40 pixel de margem superior e 40 pixel de margem inferior nos parágrafos.

Mas lembre-se o controle é SEU e você pode, com regras CSS evitar este espaçamento.
Veja o nmero 1 do item a seguir.

Dicas adicionais

1-) Para evitar aquele espaçamento referido no item anterior crie e aplique uma classe para o parágrafo superior e declare margin-top: 0; (ou n pixels) para a classe criada. Faça o mesmo com o parágrafo inferior e declare margin-bottom: 0; (ou n pixels) para a classe criada.

Você pode também declarar: margin: 0 0 40px 0; e suprimir o espaçamento superior, ou aindamargin: 40px 0 0 0; e suprimir o espaçamento inferior. E, uma série de outras combinações que ficam a título de exercícios para você.

2-) Se você deseja aplicar regras CSS em alguns elementos do documento e não em todos (por exemplo: alguns parágrafos na página seguirão uma regra line-height outros não) crie classes e aplique aos elementos.