Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
margin
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
* Some parts of this feature may have varying levels of support.
A propriedademargin doCSS 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, emargin-left.
Experimente
margin: 1em;margin: 5% 0;margin: 10px 50px 20px;margin: 10px 50px 20px 0;margin: 0;<section> <div> <div></div> <div></div> <div></div> </div></section>#container { width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start;}.row { height: 33.33%; display: inline-block; border: solid #ce7777 10px; background-color: #2b3a55; flex-shrink: 0;}#example-element { border: solid 10px #ffbf00; background-color: #2b3a55;}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 propriedademargin pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um<length>, uma<percentage>, ou a palavra-chaveauto. Cada valor pode ser positivo, zero ou negativo.
- Quandoum valor é especificado, a mesma margem é aplicada paratodos os quatro lados.
- Quandodois valores são especificados, a primeira margem é aplicada aosladossuperior e inferior, e a segunda aosladosesquerdo e direito.
- Quandotrês valores são especificados, a primeira margem é apliacada aotopo, a segunda aosladosesquerdo e direito, e a terceira aoladoinferior.
- Quandoquatro valores são especificados, as margens são aplicadas aos ladossuperior,direito,inferior eesquerdo, 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.
autoO navegador seleciona uma margem adequada para utilizar. Por exemplo, em alguns casos este valor pode ser utilizado para centralizar o elemento.
Sintaxe formal
margin =
<'margin-top'>{1,4}
<margin-top> =
<length-percentage>|
auto|
<anchor-size()>
<length-percentage> =
<length>|
<percentage>
<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)
<anchor-name> =
<dashed-ident>
<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline
Exemplos
Exemplo simples
HTML
<div>Este elemento está centralizado.</div><div> 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 utilizardisplay: 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, usemargin: 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. VejaDominando margin collapsing para mais informações.
Especificações
| Specification |
|---|
| CSS Box Model Module Level 3 # margin |
| Initial value | as each of the properties of the shorthand: |
|---|---|
| Aplica-se a | all elements, except elements with tabledisplay types other thantable-caption,table andinline-table. It also applies to::first-letter. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | alength |