Introdução

Nesta aula, vamos explorar as Margens (Margin) no CSS. As margens são essenciais para criar o espaçamento externo dos elementos, separando-os de seus vizinhos e de suas bordas.

Recomendado: É a parte mais externa do Modelo de Caixa CSS, ficando fora do preenchimento (padding) e da borda (border). É recomendado revisar vídeos anteriores sobre Box Model e Bordas.

1. O que são Margens? (Conceito e Analogia)

Margens em CSS definem o espaço ao redor de um elemento, fora de qualquer borda definida.

Analogia: Pense nas margens de um documento do Microsoft Word – o espaço em branco entre o conteúdo e a borda da página.

Relação com o Box Model: Margens são a parte mais externa do Box Model CSS, ficando fora do preenchimento (padding) e da borda (border).

2. Propriedades de Margem CSS (Lados Individuais)

É possível definir a margem para cada lado de um elemento individualmente usando propriedades específicas:

  • margin-top: Define a margem superior.
  • margin-right: Define a margem direita.
  • margin-bottom: Define a margem inferior.
  • margin-left: Define a margem esquerda.

Exemplo: Demonstração de como usar essas propriedades com valores em pixels (px) para criar espaçamento.

3. Tipos de Valores para Margens

As propriedades de margem podem aceitar diferentes tipos de valores:

  • auto: O navegador calcula a margem automaticamente.
  • length: Um valor de comprimento fixo (ex: px, pt, cm).
  • percent (%): Uma porcentagem relativa à largura do elemento contêiner.
  • inherit: O elemento herda o valor da margem do seu elemento pai.

4. Propriedade Abreviada (Shorthand) margin

Para simplificar, a propriedade margin pode ser usada para definir todas as quatro margens (ou menos) em uma única linha. A ordem dos valores importa:

  • 4 valores: margin: top right bottom left; (sentido horário). Ex: margin: 5px 10px 15px 20px;
  • 3 valores: margin: top right/left bottom; Ex: margin: 5px 10px 15px; (10px aplica-se à direita e esquerda).
  • 2 valores: margin: top/bottom right/left; Ex: margin: 5px 10px; (5px aplica-se ao topo e base, 10px à direita e esquerda).
  • 1 valor: margin: all; Ex: margin: 5px; (5px aplica-se a todos os quatro lados).

Observação: Os valores são separados por espaços.

5. Valores Especiais de Margem e Comportamentos

Valores Negativos

São permitidos e podem fazer com que os elementos se aproximem ou até se sobreponham aos seus vizinhos.

Valor auto

Usado principalmente para centralizar horizontalmente elementos de bloco que tenham uma width (largura) definida. O navegador distribui o espaço restante igualmente nas margens esquerda e direita. Ex: width: 125px; margin: auto;

Valor inherit

Faz com que um elemento use o mesmo valor de margem que foi definido em seu elemento pai. Ex: Se um <div> pai tem margin: 5px;, um <p> filho com margin: inherit; também terá margens de 5px.

6. Colapso de Margem (Margin Collapsing)

Um comportamento específico do CSS onde as margens verticais (top e bottom) de elementos de bloco adjacentes se fundem (colapsam).

Regra: A margem resultante entre eles não é a soma, mas sim o maior dos dois valores de margem que colidiram.

Exemplo: Se um <h1> tem margin-bottom: 50px; e o <p> seguinte tem margin-top: 20px;, o espaço entre eles será de 50px (o maior valor), não 70px.

Importante: Isso só acontece com margens top e bottom, não com left e right.

Elemento de Bloco: Elementos que, por padrão, ocupam toda a largura disponível e começam em uma nova linha (ex: <div>, <p>, <h1>).

Materiais utilizados

Vídeo aula

Outros alunos já terminaram essa aula, agora é sua vez!