HTML: Como inserir um recuo de primeira linha com CSS
Neste artigo vamos aprender como inserir um recuo de primeira linha com CSS, igual vemos nos livros ou quando escrevemos uma redação por exemplo.
Fala programador(a), beleza? Bora aprender coisa nova!
Necessidades de layout que não são comuns podem ser uma dor de cabeça, como por exemplo a questão do recuo na primeira linha
Porém para a nossa alegria (haha), há uma regra de CSS que resolve exatamente este problema
O nome dela é text-indent, e depois devemos adicionar uma valor para a identação
Que pode ser em px, em ou até mesmo %
Fazendo com que consigamos manipular este recuo da forma que precisarmos, vamos ver um exemplo prático:
<!DOCTYPE html>
<html>
<head>
<title>Como inserir um recuo de primeira linha com CSS</title>
<meta charset="utf-8">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis eu sem non varius. Integer ac scelerisque turpis. Nunc nec interdum nisl. Nunc varius auctor neque at laoreet. Aliquam mattis, ipsum in luctus pellentesque, libero augue fringilla eros, in auctor odio ex a tortor. Nullam viverra, nisi tristique luctus cursus, lectus ligula lacinia urna, a mattis quam mi eu nisl. Nunc ac arcu nec nisl pharetra tincidunt. Morbi pharetra quam quis quam rhoncus elementum. Quisque nulla orci, suscipit sed ornare consectetur, faucibus eleifend quam. Quisque vitae justo elementum lectus feugiat venenatis. Nam leo sapien, suscipit ut eros sit amet, auctor egestas mauris. Pellentesque euismod odio in sapien tincidunt, ut fringilla leo lobortis. </p>
</body>
</html>
Temos um HTML básico, com um texto grande e precisamos adicionar o recuo, vamos ao CSS:
p {
width: 500px;
text-indent: 2em;
}
Adicionamos uma largura (width), apenas para dar um efeito de muitas linhas, o que ocorre na vida real
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Depois utilizamos a propriedade de text-indent com valor de 2em (largura do recuo), que vai dar o recuo na nossa página
Veja o resultado:
Observe que o recuo foi aplicado! 😀
Lembrando que manipulando o valor de text-indent, você pode ter um recuo maior ou menor
Conclusão
Neste artigo vimos como inserir um recuo de primeira linha com CSS nas nossas páginas web
Para isso simplesmente utilizamos a propriedade text-indent, que leva um valor que é justamente o tamanho da identação
Podendo assim manipular esse recuo da forma que você precisar
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 473 aulas
- 20 projetos
- 39h 26min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Melhor curso de agentes de IA: Conheça a Formação da Hora de Codar
Descubra o melhor curso de agentes de IA do mercado: confira a Formação Agentes de IA Hora de Codar e outras opções para impulsionar sua […]
