Como Indentar (Espaçar) a Primeira Linha em CSS - A Propridade text-indent

Neste breve tutorial de nossa apostila de CSS, vamos iniciar nossos estudos sobre indentação , que são maneiras de se formatar um texto para ficar mais agradável e legível para o leitor.

Para introduzir tais assuntos, vamos começar mostrando e explicando a propriedade do CSS text-indent.

Como obter o Certificado do Curso de Webmaster e Começar a Trabalhar Criando Sites

Indentação, Espaçamento e Organização em HTML & CSS

Você já parou pra notar que raramente vai encontrar um texto que é colado na lateral de sua tela?

Sempre existe um espaçamento, uma região em branco entre a borda da tela, borda da lateral ou uma distância entre outro elemento até o início texto.

Também existe um espaçamento entre parágrafos (tags <p>) e entre linhas (<br>).
Embora esses espaços não alterem o conteúdo do texto, eles são de vital importância para qualquer site.

Na verdade, não só para sites.
Imagine você ler um livro sem parágrafos, sem quebra de linha, sem um espaçamento ou divisão.
Seria algo extremamente cansativo e enfadonho.

Além de não ser interessante esteticamente, uma página sem espaçamento e organização traz um agravante para os sites: o leitor vai abrir seu site, irá ver aquele amontoado de texto desordenado e vai rapidamente fechar seu site.
Se ele tiver achado seu site pelo Google, você vai ficar com uma imagem 'suja' no buscador, que percebeu que o leitor não gostou de seu site, e você vai acabar perdendo posições no rankeamento dos sistemas de buscas.

Logo, um texto bonito, agradável e organizado irá fazer com que os leitores gostem, compartilhem e retornem para seus sites.

Em nossos tutoriais de CSS iremos aprender como indentar a primeira linha, distância entre parágrafos, distância até as bordas superior, inferior e laterais, distância entre texto e imagem, e uma porção de outras propriedades que nos auxiliam, de maneira simples, a deixar nossos sites bem organizados.




Como Indentar a Linha - text-indent: px, em, pt

A propriedade text-indent, do CSS, serve para definirmos uma espaçamento antes da primeira palavra, na primeira linha de um bloco de texto.

A sintaxe em CSS é:

text-indent: n medida;

Onde "n" é um número e "medida" é a medida do tamanho, que pode ser em px (pixel), pt ou em.
Essas medidas foram melhor explicadas no tutorial sobre a propriedade font-size do CSS.

Para que a primeira palavra de todo parágrafo fique indentada de uma distância 5 pixels:
p{
  text-indent: 5 px;
}

Para que todas tags H1 fiquem indentadas em 2em:
h1{
  text-indent: 2em;
}

O valor padrão desse espaçamento é 0.
Assim, se colocar um valor positivo, iremos espaçar a primeira linha e caso usemos um valor negativo estaremos recuando o texto, veja o seguinte código:
<div style="text-indent: 5px;">Este texto usa indentação de 5 pixels</div>
<div style="text-indent: 0px;">Indentação de 0 pixels (espaçamento padrão)</div>
<div style="text-indent: -4px;">Este texto usa indentação de -4 pixels</div>

Tem o seguinte efeito:

Este texto usa indentação de 5 pixels
Indentação de 0 pixels (espaçamento padrão)
Este texto usa indentação de -4 pixels

Um comentário:

Anônimo disse...

em qual momento você explicou a propriedade pt?