2.8 KiB
title | localeTitle |
---|---|
Margins | Margens |
Margens
A margin
propriedade CSS define a área de margem em todos os quatro lados de um elemento. Essa propriedade pode ser usada para gerar espaço em torno do conteúdo (fora da borda). É uma forma abreviada de definir todas as margens individuais de uma vez: margin-top
, margin-right
, margin-bottom
e margin-left
. Os valores são definidos no sentido horário.
Os valores de margem são definidos usando comprimentos ou porcentagens, ou auto
ou inherit
palavra-chave, e podem aceitar valores zero ou negativos. O valor inicial, ou padrão, para todas as propriedades de margem é 0. Enquanto você pode usar a palavra-chave inherit
mas não pode ser usado junto com um valor de comprimento.
Sintaxe
.element {
margin: margin-top || margin-right || margin-bottom || margin-left;
}
Essa propriedade pode ser especificada usando um, dois, três ou quatro valores.
- Quando um valor é especificado, ele aplica a mesma margem aos quatro lados.
- Quando dois valores são especificados, a primeira margem se aplica à parte superior e inferior, a segunda à esquerda e à direita.
- Quando três valores são especificados, a primeira margem se aplica à parte superior, a segunda à esquerda e à direita e a terceira à parte inferior.
- Quando quatro valores são especificados, as margens são aplicadas na parte superior, direita, inferior e esquerda nessa ordem (sentido horário).
/* Apply to all four sides */
margin: 1em;
/* top and bottom | left and right */
margin: 5% 10%;
/* top | left and right | bottom */
margin: 1em 2em 2em;
/* top | right | bottom | left */
margin: 5px 1em 0 1em;
Onde no modelo de caixa
A propriedade de margem no CSS define a parte mais externa do modelo de caixa, criando espaço em torno do conteúdo de um elemento, fora de quaisquer limites e / ou bordas definidos.
Margens em colapso
Margens verticais em elementos diferentes que se tocam (portanto, sem conteúdo, preenchimento ou bordas separando-as) irão colapsar, formando uma margem única que é igual à maior das margens adjacentes. Isso não acontece nas margens horizontais (esquerda e direita), apenas vertical (superior e inferior).
Suporte de Navegador
É efetivamente suportado em todos os navegadores (desde IE6 +, Firefox 2+, Chrome 1+ etc)