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.
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.
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 120 aulas
- 4 projetos
- 9h 45min
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:
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
Explica que nem todo mundo quer colar os parágrafos, muita gente quer é o contrário, dar mais respiro
Aí o caminho é o mesmo margin, só que ao invés de zerar tu escolhe o valor
Usa margin-bottom pra empurrar só a parte de baixo de cada parágrafo:
p { margin-bottom: 30px; }
Quanto maior o valor, mais longe um parágrafo fica do outro
Se quiser afastar em cima e embaixo ao mesmo tempo, usa margin sozinho com um valor no lugar do zero
Bora testar valores diferentes e ver qual encaixa no teu layout
Aqui mora uma confusão bem comum, então se liga
Margin mexe na distância de UM parágrafo pro OUTRO
Já o espaço entre as linhas DENTRO do mesmo parágrafo é outra propriedade, o line-height
Se o teu texto tá com as linhas grudadas ou espaçadas demais por dentro, não é margin que resolve, é o line-height:
p { line-height: 1.6; }
Então a regra é simples
Parágrafo longe de parágrafo? margin
Linha longe de linha no mesmo bloco? line-height
Muita gente tenta resolver isso com padding e fica se perguntando por que não fica igual
A diferença é curta
Margin é o espaço POR FORA do parágrafo, empurrando os vizinhos pra longe
Padding é o espaço POR DENTRO, entre a borda do elemento e o texto
Pra afastar um parágrafo do outro, o certo é margin
Padding tu usa quando quer respiro interno, tipo dentro de uma caixa com fundo colorido
Guarda essa: espaço ENTRE elementos é margin, espaço DENTRO do elemento é padding
Como tirar todo o espaço entre os parágrafos? Basta zerar a margin da tag p no CSS com p { margin: 0 } e os parágrafos ficam colados, só com a altura da própria linha separando
Como deixar os parágrafos mais afastados? Em vez de zerar, coloca um valor na margin, tipo margin-bottom com o espaço que tu quiser, quanto maior o número mais longe um fica do outro
Por que meus parágrafos já vêm afastados sem eu fazer nada? Porque o navegador aplica uma margin padrão na tag p, então o espaço já vem de fábrica e tu só ajusta ou remove via CSS
Margin não funciona, e agora? Confere se o seletor tá certo e se não tem outra regra CSS mais específica sobrescrevendo, isso costuma ser o motivo
Leia também
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Como fazer um select mudar de URL/link
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
