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.

Experimente

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

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

Sintaxe

css
/* <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

margin-bottom = 
<length-percentage> | (en-US)
auto

<length-percentage> =
<length> (en-US) | (en-US)
<percentage> (en-US)

Exemplo

HTML

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

css
.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

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

Especificações

Specification
CSS Box Model Module Level 3
# margin-physical
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
Computed valuethe percentage as specified or the absolute length
Animation typea length

Compatibilidade com navegadores

BCD tables only load in the browser