Controlando as entrelinhas e o espaçamento entre elementos HTML ~ .::Acessa Brasil::.

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.

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.

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.

0 comentários:

Postar um comentário

Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).

quinta-feira, 18 de março de 2010