2.8 KiB

Raw Blame History

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)

2.8 KiB Raw Blame History