Controlando as entrelinhas e o espaçamento entre elementos HTML

Publicado em: 26/02/2004
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.

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.

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 herança 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 marcação 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 marcação mostrada cria uma página contendo três parágrafos, filhos de body, com tamanhos de fonte iguais 12px, 16px e 28px respectivamente. Para o elemento-pai dos parágrafos (body) foi definido um tamanho de fonte igual a 16px e uma line-height a definir. Pelos princípios da herança (Ver tutorial sobre herança CSS) o tamanho de fonte para os parágrafos não será herdado porque foram definidos explicitamente tamanhos de fontes para eles. Mas, a propriedade line-height será herdada, pois não foi declarada explicitamente para os parágrafos.

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

Herança para line-height em porcentagem.

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

Pelos mecanismos normais de herança é de se supor que cada um dos parágrafos herde line-height:120%; e como consequencia o espaçamento entre linhas para cada um deles seja 1.2 vezes o tamanho da fonte declarada, ou seja:

  • 1o. parágrafo: line height igual a 12px x 1.2 = 14.4px
  • 2o. parágrafo: line height igual a 16px x 1.2 = 19,2px
  • 3o. parágrafo: line height igual a 28px x 1.2 = 33,6px

Se assim fosse a herança determinaria que à medida que cresce o tamanho de fonte cresce também line-height. Contudo, observe a seguir como são renderizados os três parágrafos.

Veja nesta página como se dá a renderização dos três parágrafos.

É perfeitamente possível visualizar que o espaçamanto entrelinhas permanece rigorosamente igual para os três parágrafos e isso causa o efeito de uma entrelinha muito grande para a fonte pequena (1o. parágrafo), muito pequena para a fonte grande (3o. parágrafo) e normal para a fonte de 16px (2o. parágrafo).

Isso aconteceu porque a herança 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 herança. 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 não a declarada. No nosso exemplo 19,2px para todos os parágrafos.

Herança para line-height em medida CSS de comprimento.

Suponha que na marcação 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 página como se dá a renderização dos três parágrafos.

Aqui também é perfeitamente possível visualizar que o espaçamento entrelinhas permanece rigorosamente igual para os três parágrafos e isso causa o efeito de uma entrelinha muito grande para a fonte pequena (1o. parágrafo), muito pequena para a fonte grande (3o. parágrafo) e normal para a fonte de 16px (2o. parágrafo).

Herança para line-height com o valor normal.

Suponha que na marcação 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.

  • 1o. parágrafo: line height igual a 12px x 1.2 = 14.4px
  • 2o. parágrafo: line height igual a 16px x 1.2 = 19,2px
  • 3o. parágrafo: line height igual a 28px x 1.2 = 33,6px

Veja nesta página como se dá a renderização dos três parágrafos.

Nesse caso o espaçamanto entre linhas varia de acordo com o tamanho de fonte defido para o parágrafo. Essa é a situação que queremos em nossa página, contudo limita a entre linha a 120%. Como definir uma entrelinha de 150%, por exemplo, escalável de acordo com o tamanho da fonte? Declare line-height com valor numérico.

Herança para line-height com valor numérico.

Suponha que na marcação 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 cálculo é feito como mostrado a seguir.

  • 1o. parágrafo: line height igual a 12px x 1.5 = 18px
  • 2o. parágrafo: line height igual a 16px x 1.5 = 24px
  • 3o. parágrafo: line height igual a 28px x 1.5 = 42px

Veja nesta página como se dá a renderização dos três parágrafos.

Nesse caso o espaçamanto entrelinhas varia de acordo com o tamanho de fonte defido para o parágrafo. Essa é a situação ideal na qual temos o controle total sobre a entrelinha.

E o espaçamento (a distância vertical) entre os parágrafos?

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.

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 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 número 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 ainda margin: 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.