:: Controlando as entrelinhas e o espaçamento entre elementos HTML ::
As propriedades line-height e margin
A propriedade CSS de dimensionamento line-height permite controlar
o espaçamento entre linhas e a propriedade CSS margin permite
controlar o espaçamento entre elementos HTML.
Observe abaixo o código HTML para um texto composto de dois parágrafos:
<html>
<head>
</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>
</html>O código acima é renderizado pelo navegador conforme mostrado abaixo.
Notar a distância entre as linhas em cada parágrafo, ou seja as entrelinhas (não confunda com distância entre parágrafos):
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.
Alterando o espaçamento entre linhas
No código HTML mostrado acima vamos inserir uma regra CSS para line-height
que é a propriedade CSS que controla as entrelinhas. Observe abaixo
o mesmo código com a regra, definindo uma entrelinha igual a 200%.
Nota: A entrelinha default do bronwser é 100%.
Você pode usar qualquer medida de comprimento, válida em CSS
(px, cm, em, %, in...) para o valor da propriedade line-height.
<html>
<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>
</html>O código acima é renderizado pelo navegador conforme mostrado abaixo.
Notar que a entrelinha que era default 100%, agora está 200% ou seja dobrou:
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.
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.
E o espaçamento (a distância) 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 no nosso código.
Se voce não lembra da propriedade margin, leia este tutorial
sobre margens
<html>
<head>
<style type="text/css">
<!--
p {
line-height:200%;
margin: 40px 0 40px 0;
-->
</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>
</html>O código acima é renderizado pelo navegador conforme mostrado abaixo.
Notar que a entrelinha continua em 200% e agora o espaçamento entre parágrafos cresceu para 40 pixels, cumprindo a regra CSS, escrita.
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.
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, ambas 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. Tem como evitar este espaçamento não previsto :-) Veja o item 1-) abaixo.
Dicas adicionais
1-) Para evitar aquele espaçamento referido acima, crie e aplique
uma classe no parágrafo superior com margin-top: 0; (ou n pixels) e
outra classe ao parágrafo inferior com margin-bottom: 0; (ou n pixels);
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.
Última modificação: 2006/08/30 09:24:12 GMT
Criado em: 2004-02-26
Atualizado em: 2005-03-11
