Margens (espaços) entre parágrafos em CSS - Os atributos margin-top e margin-bottom (Tutorial)

Neste tutorial de CSS de nossa apostila, vamos aprender para que serve e usar duas propriedades do CSS, a margin-top e a margin-bottom, que nos permitirão deixar as margens (espaçamento) entre os parágrafos do tamanho que quisermos.

• Baixar PDF: Apostila HTML + CSS Progressivo

Margens em CSS - margin

Quando ensinamos a indentar a primeira linha de um bloco de texto qualquer, em nosso tutorial sobre a propriedade text-indent, explicamos a importância desses espaçamentos, pois ajudam na organização do site e o tornam mais prazerosos para a leitura.

Porém, existem diferentes tipos de indentação e espaçamento, e um desses tipos são as margens.
Margens são espaçamentos que tem por função separar elementos com fins de organização e design.

As margens não tem cores, são sempre transparentes.

As margens, ou margin em inglês, são muito usadas em textos, imagens, para separar uma barra lateral do conteúdo, centralizar seu artigo, distanciar uma figura ou anúncio do texto etc.

Usaremos margens em diversos momentos de nosso curso de HTML e CSS, pois a propriedade margin é bem flexível e genérica.

Margem Entre Parágrafos - margin-top e margin-bottom

Para iniciar nossos estudos sobre margens em CSS, vamos aprender a definir o tamanho das margens entre os parágrafos, que você já deve ter notado ao usar a tag <p>.

Pode parecer pouca coisa, mas até pouco tempo atrás, quando somente o HTML reinava na criação de sites, esses espaçamentos e margens eram inalteráveis, e graças ao CSS hoje temos o poder e flexibilidade de decidir tudo em um site.

Margem Superior em CSS- margin-top: valor

Para definirmos a margem superior (espaço transparente) que fica acima de um parágrafo, por exemplo, usamos o atributo margin-top do CSS.
(top é topo, acima em inglês)

A sintaxe é bem simples:

margin-top: x n;

Onde 'x' é um valor numérico 'n' uma unidade de medida, como px, pt ou em.
Veja o seguinte exemplo de código HTML & CSS mostrando na prática o margin-top:

<p style="margin-top:30px">30px de margem acima</p>
<p style="margin-top:20px">20px de margem acima</p>
<p style="margin-top:10px">10px de margem acima</p>
<p style="margin-top:0 px">0 px de margem acima</p>

Agora o efeito

30px de margem acima

20px de margem acima

10px de margem acima

0  px de margem acima

Margem Inferior em CSS - margin-bottom: valor

No exemplo anterior, definimos bem a margem superior de cada parágrafo.

Já a margem inferior não foi definida, e o espaço que você viu no exemplo era resultado da margem do parágrafo abaixo.

Porém, há uma maneira de definir também a margem inferior de um elemento do HTML, como o parágrafo. Isso é possível através da propriedade "margin-bottom" do CSS, cuja sintaxe é:

margin-bottom: x n;

Onde 'x' é um valor numérico 'n' uma unidade de medida, como px, pt ou em.
(bottom, em inglês, significa fundo)

Vamos fazer um exemplo análogo ao anterior, agora mostrando como alterar a margem inferior de um parágrafo.

Nosso código HTML & CSS é:

<p style="margin-bottom:30px">30px de margem abaixo</p>
<p style="margin-bottom:20px">20px de margem abaixo</p>
<p style="margin-bottom:10px">10px de margem abaixo</p>
<p style="margin-bottom:0 px">0 px de margem abaixo</p>

Veja o efeito:

30px de margem abaixo

20px de margem abaixo

10px de margem abaixo

0 px de margem abaixo