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 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.
Experimente
margin: 1em;
margin: 5% 0;
margin: 10px 50px 20px;
margin: 10px 50px 20px 0;
margin: 0;
<section id="default-example">
<div id="container">
<div class="row"></div>
<div class="row transition-all" id="example-element"></div>
<div class="row"></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 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
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 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
| 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 table display types other than table-caption, table and inline-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 | a length |
Compatibilidade com navegadores
Loading…