margin-bottom

A propriedade CSS  margin-bottom  define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.

The effect of the CSS margin-bottom property on the element box

A propriedade não tem efeito em non-replaced elementos inline, como <span> ou <code>.

Sintaxe

/* <length> values */
margin-bottom: 10px;  /* Um tamanho absoluto */
margin-bottom: 1em;   /* relativo ao tamanho do texto */
margin-bottom: 5%;    /* relativo à largura do container do bloco mais próximo */

/* Keyword values */
margin-bottom: auto;

/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;

A propriedade margin-bottom é especificada como a palavra chave auto, ou a <length>, ou a<percentage>. Esse valor pode ser positivo, zero ou negativo

Values

<length>
O tamanho de uma margin com um valor fixo
<percentage>
O tamanho de uma margin como porcentagem, é relativa com o tamanho do bloco pai.
auto
O navegador seleciona um valor adequado para usar. Veja margin.

Sintaxe formal

<length> | <percentage> | auto

Exemplo

HTML

<div class="container">
<div class="box0">Box 0</div>
<div class="box1">Box 1</div>
<div class="box2">Box one's negative margin pulls me up</div>
</div>

CSS

CSS para definir margin-bottom e height

.box0 {
    margin-bottom:1em;
    height:3em;
}
.box1 {
    margin-bottom:-1.5em;
    height:4em;
}
.box2 {
    border:1px dashed black;
    border-width:1px 0;
    margin-bottom:2em;
}

Algumas definições para container e divs, para que o os efeitos de margin possam ser vistos com mais clareza

.container {
    background-color:orange;
    width:320px;
    border:1px solid black;
}
div {
    width:320px;
    background-color:gold;
}

Especificações

Especificação Status Comentário
CSS Basic Box Model
The definition of 'margin-bottom' in that specification.
Rascunho atual Nenhuma mudança significativa
CSS Transitions
The definition of 'margin-bottom' in that specification.
Rascunho atual Definir o margin-bottom como "animavel"
CSS Level 2 (Revision 1)
The definition of 'margin-bottom' in that specification.
Recomendação Remove seu efeito nos elementos in-line.
CSS Level 1
The definition of 'margin-bottom' in that specification.
Recomendação Definição inicial
Initial value0
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 valuethe percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Compatibilidade dos Browsers

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
margin-bottomChrome 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 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android ?
autoChrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes The auto value is not supported in quirks mode.
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 Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?

Legend

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