margin-bottom

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

margin-bottom = 
<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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-bottom
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.