Você sabe como recuar parágrafos usando CSS? Um bom web design geralmente tem a ver com uma boa tipografia. Uma vez que grande parte do conteúdo de uma página da web é apresentado como texto, ser capaz de definir o estilo desse texto para ser atraente e eficaz é uma habilidade importante para um web designer.
Infelizmente, não temos o mesmo nível de controle tipográfico online que temos na mídia impressa. Isso significa que nem sempre podemos definir o estilo de um texto de maneira confiável em um site da mesma forma que faríamos em uma peça impressa.
Recuar parágrafos com CSS
Um estilo de parágrafo comum que você vê com frequência na impressão (e que podemos recriar online) é onde a primeira linha desse parágrafo é recuada em um espaço de tabulação. Isso permite que os leitores vejam onde um parágrafo começa e outro termina.
Você não vê esse estilo visual tanto em páginas da web porque os navegadores, por padrão, exibem parágrafos com espaço abaixo deles como uma forma de mostrar onde um termina e outro começa, mas se você quiser estilizar uma página para ter essa impressão estilo de indentação inspirado em parágrafos, você pode fazer isso com a propriedade de estilo text-indent .
A sintaxe desta propriedade é simples. Aqui está como você adicionaria um recuo de texto a todos os parágrafos em um documento.
p {
text-indent: 2em;
}
Personalizando os recuos
Uma maneira de especificar exatamente os parágrafos a recuar, é adicionar uma classe aos parágrafos que deseja recuar, mas isso requer que você edite cada parágrafo para adicionar uma classe a ele. Isso é ineficiente e não segue as práticas recomendadas de codificação HTML.
Em vez disso, você deve levar em consideração ao recuar parágrafos. Você recua parágrafos que seguem diretamente outro parágrafo. Para fazer isso, você pode usar o seletor de irmão adjacente.
Com este seletor, você está selecionando cada parágrafo que é imediatamente precedido por outro parágrafo.
p + p {
text-indent: 2em;
}
Como você está recuando a primeira linha, também deve se certificar de que seus parágrafos não tenham nenhum espaço extra entre eles (que é o padrão do navegador).
Estilisticamente, você deve ter espaço entre os parágrafos ou recuar a primeira linha, mas não ambos.
p {
margin-bottom: 0;
padding-bottom: 0;
}
p + p {
margin-top: 0;
padding-top: 0;
}
Recuos negativos
Você também pode usar a propriedade text-indent , junto com um valor negativo, para fazer com que o início de uma linha vá para a esquerda em oposição à direita como um recuo normal.
Você pode fazer isso se uma linha começar com uma aspa, de forma que o caractere de aspas apareça na pequena margem à esquerda do parágrafo e as próprias letras ainda formem um bom alinhamento à esquerda.
Digamos, por exemplo, que você tenha um parágrafo que é descendente de um bloco de citação e deseja que ele seja indentado negativamente. Você pode escrever este CSS:
blockquote p {
text-indent: -.5em;
}
Isso faria com que o início do parágrafo, que provavelmente inclui o caractere de citação de abertura, fosse ligeiramente movido para a esquerda para criar uma pontuação deslocada.
Recuar parágrafos com CSS em relação às margens e enchimento
Freqüentemente, em web design, você usa valores de margem ou preenchimento para mover elementos e criar espaços em branco.
Essas propriedades não funcionarão para obter o efeito de parágrafo recuado, no entanto.
Se você aplicar qualquer um desses valores ao parágrafo, todo o texto desse parágrafo, incluindo todas as linhas, será espaçado em vez de apenas a primeira linha.
