CSS HTML

HTML: Como inserir um recuo de primeira linha com CSS

7 de maio de 2020

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.

recuo na primeira linha html css capa

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:

como inserir um recuo de primeira linha com CSS ex1

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x