CSS HTML

Espaçamento entre parágrafos no HTML

12 de junho de 2020

Espaçamento entre parágrafos no HTML

Neste artigo você vai aprender a reduzir o espaçamento entre parágrafos no HTML, que inicialmente é grande e pode atrapalhar o layout.

espacamento entre paragrafos capa

Fala programador(a), tudo certo? Bora aprender coisa nova!

Por default os parágrafos no HTML ficam um distante do outro, e até demais

Então é necessário regular esta medida via a propriedade margin com CSS

Pois esta propriedade é inciada como margin-bottom e 10px

Fazendo com que distancie um do outro 10px a mais do que suas alturas, representando um bom espaço em branco

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Vamos ver um exemplo prático de como eliminar essa margin:

<!DOCTYPE html>
<html>
<head>
    <title>Espaçamento entre paragrafos</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Os parágrafos</p>
    <p>Estão muito distantes</p>
</body>
</html>

E agora o CSS para resolver o problema:

p {
    margin: 0;
}

Colocando esta regra no seu arquivo de estilo, os parágrafos ficarão juntos, veja:

espacamento entre paragrafos ex1

E desta forma, conseguimos resolver o nosso problema, que eram os parágrafos muito espaçados

Devido a margin que inicia com 10px na parte inferior de cada elemento da tag p

Conclusão

Neste artigo vimos como reduzir o espaçamento entre parágrafos, a tag p do HTML

Apenas retiramos todos os valores da margin, que já vem setada de forma default no HTML

Com isso o espaçamento dos parágrafos foi reduzido a apenas a altura da linha que os representa

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
()
x