Objetivo

Mostrar o uso de uma técnica CSS para determinar qual deverá ser a distância entre as linhas de um parágrafo, bem como aquela entre dois parágrafos adjacentes.

Ao final da leitura deste artigo você estará capacitado a personalizar as entrelinhas e entre parágrafos nos seus documentos Web, com uso das CSS.

A renderezição default

Observe abaixo um fragmento de código HTML de uma página web, para apresentação de 03 (três) parágrafos na tela de um monitor.

..............

Este é o primeiro parágrafo exemplo do tutorial escrito por Maurício Samy Silva desenvolvedor do site CSS para Web Design e que destina-se a demonstrar como você pode ter controle total sobre as entrelinhas e espaçamentos.

Este é o segundo parágrafo exemplo do tutorial. Você vai conhecer mais uma das inúmeras possibilidades das CSS. Com HTML você não consegue este efeito.

Este é o terceiro parágrafo exemplo do tutorial. Não só o espaçamento entre as linhas de um parágrafo é perfeitamente controlável, como também o espaçamento entre parágrafos.

..................

Os três parágrafos renderizados na tela de um monitor serão apresentados como mostrado na figura abaixo:

(Destaquei na figura os espaçamentos referidos neste artigo)

As propriedades CSS "line-height" e "margin"

As propriedades CSS que controlam os espaçamentos referidos sao:

line-height: determina o espaçamento entre as linhas dentro de um elemento HTML. Cada elemento HTML possui uma line-height default. No caso deste tutorial estamos tratando especificamente do elemento parágrafo.

margin: a propriedade margin, controla o espaçamento entre dois elementos HTML adjacentes. Cada elemento HTML possui uma margin default. As margens são definidas em quatro direções em volta do elemento: margem no topo, esquerda, abaixo, direita.

Nota: Os espaçamentos default são implementados pelo brownser e sofrem uma pequena variação, de acordo com o brownser utilizado para a visualização.

As regras CSS para espaçamentos

Se temos propriedades CSS que controlam aqueles espaçamentos, é imediato concluir que basta escrevermos regras CSS para alterá-los.

E as regras são bem simples:

-- >

Você já deve ter concluído que a aplicação da regra acima vai aumentar em 60% as entrelinhas e passar para 2.0em o espaçamento entre parágrafos.:

Na figura abaixo o resultado da aplicação das regras no parágrafo:

Compare com a figura anterior.

O controle é seu!

Uma regra CSS bem simples, possibilitando total controle sobre espaçamentos. Convém lembrar que qualquer medida CSS de comprimento válida poderá ser usada (px, %, em, pt, pc, cm, mm, etc...).

Mostrei neste artigo um AUMENTO dos espaçamentos. Se você deseja uma diminuição daqueles espaçamentos, a técnica é a mesma. Por exemplo: use 80% e 0.7em.

Use classes

Duas perguntas são imediatas:

1^a. Pergunta: Mas, a aplicação da folha de estilo mostrada no artigo, quer incorporada quer importada, afetará TODOS os parágrafos na página.

Resposta: CORRETO! Se você deseja aplicar as regras CSS em alguns parágrafos da página, crie uma classe e aplique.

2^a. Pergunta: Mas, mesmo que eu queira a aplicação da folha de estilo em toda a página, ganharei um espaçamento acima do primeiro parágrafo e abaixo do último, mas só queria ENTRE os parágrafos.

Resposta: CORRETO! Se você deseja aqueles espaçamentos diferenciados, crie uma classe com margem superior e inferior diferentes e aplique nos primeiro e último parágrafos.

Descruba a versatilidade das CSS
Projete conforme as Web Standards.