Propriedade margin §

---

A propriedade margin é utilizada para definir o espaçamento ao redor de um elemento, ou seja, controla o espaço externo do elemento em relação aos demais elementos na página.

Nota

A propriedade margin pode aceitar um, dois, três ou quatro valores, cada um representando uma direção diferente. Veja também shorthand.

Sintaxe §

/* Definindo o mesmo valor de margem para todas as direções */
.elemento {
  margin: 10px;
}
 
/* Definindo valores diferentes para cada direção (top, right, bottom, left) */
.elemento {
  margin: 10px 20px 15px 5px;
}

Direções da margem §

• margin-top: Controla o espaçamento acima do elemento.
• margin-right: Controla o espaçamento à direita do elemento.
• margin-bottom: Controla o espaçamento abaixo do elemento.
• margin-left: Controla o espaçamento à esquerda do elemento.

.elemento {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 5px;
}

Valores específicos: §

Valor auto §

Pode ser usado para centralizar um elemento horizontalmente dentro de seu contêiner.

.elemento {
  margin-left: auto;
  margin-right: auto;
}

Valor percentual §

Define a margem como uma porcentagem da largura do contêiner pai.

.elemento {
  margin: 5%;
}

Shorthand §

O formato shorthand é útil quando os valores de margem são aplicados a todas as direções ou quando são aplicados a pares opostos (top/bottom ou left/right).

/* Shorthand para aplicar o mesmo valor a todas as direções */
.elemento {
  margin: 10px;
}
 
/* Shorthand para aplicar valores diferentes para top/bottom e left/right */
.elemento {
  margin: 10px 20px;
}

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado