margin-bottom

Experimente

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> (en-US)
O tamanho de uma margin com um valor fixo
<percentage> (en-US)
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

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 Box Model
The definition of 'margin-bottom' in that specification.
Candidata a Recomendação 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 and ::first-line.
Inheritednão
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typea length

Compatibilidade com navegadores

BCD tables only load in the browser