Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right, margin-bottom, e margin-left.

Sintaxe

/* Aplica para todos os quatro lados */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* topo | horizontal | inferior */
margin: 1em auto 2em; 

/* topo | direita | inferior | esquerda */
margin: 2px 1em 0 auto;

/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;

A propriedade margin pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um <length>, uma <percentage>, ou a palavra-chave auto. Cada valor pode ser positivo, zero ou negativo.

  • Quando um valor é especificado, a mesma margem é aplicada para todos os quatro lados.
  • Quando dois valores são especificados, a primeira margem é aplicada aos lados superior e inferior, e a segunda aos lados esquerdo e direito.
  • Quando três valores são especificados, a primeira margem é apliacada ao topo, a segunda aos lados esquerdo e direito, e a terceira ao lado inferior.
  • Quando quatro valores são especificados, as margens são aplicadas aos lados superior, direito, inferior e esquerdo, nesta ordem (sentido horário).

Valores

length
O tamanho da margem como um valor fixo.
percentage
O tamanho da margem como um percetual, relativo à largura do bloco em que o elemento está contido.
auto
O navegador seleciona uma margem adequada para utilizar. Por exemplo, em alguns casos este valor pode ser utilizado para centralizar o elemento.

Sintaxe formal

[ <length> | <percentage> | auto ]{1,4}

Exemplos

Exemplo simples

HTML

<div class="center">Este elemento está centralizado.</div>

<div class="outside">Este elemento está posicionado fora de seu bloco recipiente.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Mais exemplos

margin: 5%;                 /* todos os lados: margem de 5% */

margin: 10px;               /* todos os lados: margem de 10px */

margin: 1.6em 20px;         /* topo e inferior:    margem de 1.6em */
                            /* esquerda e direita: margem de 20px  */

margin: 10px 3% 1em;        /* topo:               margem de 10px */
                            /* esquerda e direita: margem de 3%   */
                            /* inferior:           margem de 1em  */

margin: 10px 3px 30px 5px;  /* topo:     margem de 10px */
                            /* direita:  margem de 3px  */
                            /* inferior: margem de 30px */
                            /* esquerda: margem de 5px  */

margin: 2em auto;           /* topo e inferior: margem de 2em          */
                            /* caixa está horizontalmente centralizada */

margin: auto;               /* topo e inferior: margem de 0            */
                            /* caixa está horizontalmente centralizada */

Notas

Centralização horizontal

Para centralizar algo horizontalmente em navegadores modernos, você pode utilizar display: flex; justify-content: center;

Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, estes não estão disponíveis. Para centralizar um elemento dentro de seu pai, use margin: 0 auto; .

Colapso de margens

Às vezes, as margens superior e inferior de elementos são colapsadas em uma única margem que é igual à maior das duas margens. Veja Dominando margin collapsing para mais informações.

Especificações

Especificação Status Comentário
CSS Basic Box Model
The definition of 'margin' in that specification.
Rascunho atual Nenhuma mudança significativa.
CSS Transitions
The definition of 'margin' in that specification.
Rascunho atual Define margin como animável.
CSS Level 2 (Revision 1)
The definition of 'margin' in that specification.
Recomendação Remove seu efeito em elementos inline.
CSS Level 1
The definition of 'margin' in that specification.
Recomendação Definição inicial.

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritednão
Percentagesrefer to the width of the containing block
Midiavisual
Computed valueas each of the properties of the shorthand:
  • margin-bottom: the percentage as specified or the absolute length
  • margin-left: the percentage as specified or the absolute length
  • margin-right: the percentage as specified or the absolute length
  • margin-top: the percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Compatibilidade de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android Full support Yes
autoChrome Full support 1Edge ? Firefox Full support 1IE Full support 6
Notes
Full support 6
Notes
Notes The auto value is not supported in quirks mode.
Opera Full support 3.5Safari Full support 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Veja também

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: felima2017
Última atualização por: felima2017,