Propriedade CSS margin-bottom

A propriedade CSS margin-bottom define o espaço abaixo de um elemento, entre sua borda inferior e o próximo elemento no fluxo. A margem é transparente: ela afasta o conteúdo vizinho, mas nunca possui fundo ou borda próprios. Esta página aborda a sintaxe, as unidades aceitas, a regra surpreendente — mas importante — do colapso de margens, e como margin-bottom se relaciona com as demais propriedades de margem.

Use margin-bottom sempre que quiser espaço vertical após um elemento — por exemplo, espaçamento entre parágrafos empilhados, separação de um título do texto abaixo dele, ou uma folga abaixo de um cartão.

Informação

Valores negativos são válidos (ex.: margin-bottom: -10px;) e puxam o elemento seguinte para cima, permitindo sobreposição.

Informação

margin-bottom não tem efeito em elementos inline não substituídos, como <span> ou <a>. Para aplicar margem vertical a eles, defina primeiro display: inline-block ou display: block.

margin-bottom é um dos quatro lados controlados pela propriedade abreviada margin; seu parceiro vertical é margin-top.

Valor Inicial	0
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não.
Animável	Sim. A margem inferior do elemento é animável.
Versão	CSS2
Sintaxe DOM	object.style.marginBottom = "70px";

Sintaxe

Sintaxe da Propriedade CSS margin-bottom

margin-bottom: length | percentage | auto | initial | inherit;

Você pode expressar o valor de diversas formas:

length — um tamanho fixo em px, em, rem, pt, cm, etc. em é relativo ao tamanho de fonte do próprio elemento; rem, ao tamanho de fonte da raiz.
percentage — uma fração da largura do bloco contentor (não da altura), portanto uma margem inferior em % escala conforme a largura do elemento pai.
auto — o navegador calcula o valor; para margin-bottom, isso quase sempre resolve para 0.
initial / inherit — redefine para o padrão (0) ou copia o valor do elemento pai.

Exemplo da propriedade margin-bottom:

Exemplo da Propriedade CSS margin-bottom com valor em px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade margin-bottom definida como "4em":

Exemplo da Propriedade CSS margin-bottom com valor em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom {
        margin-bottom: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade margin-bottom especificada em "px", "em" e "%":

Exemplo da Propriedade CSS margin-bottom com valores em px, em e %

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.p1 {
        margin-bottom: 5em;
      }
      p.p2 {
        margin-bottom: 20%;
      }
      p.p3 {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>A paragraph with no margins specified.</p>
    <p class="p1">Bottom margin is set to 5em.</p>
    <p class="p2">Bottom margin is set to 20%.</p>
    <p class="p3">Bottom margin is set to 20px.</p>
    <p>A paragraph with no margins specified.</p>
  </body>
</html>

Experimente Você Mesmo »

Colapso de margens

Uma surpresa comum: quando a margin-bottom de um bloco encontra a margin-top do bloco seguinte, as duas não se somam. Em vez disso, elas colapsam em uma única margem igual à maior das duas. O colapso se aplica apenas às margens verticais (superior e inferior) de caixas em nível de bloco — margens horizontais nunca colapsam.

Colapso de Margens

p.one {
  margin: 20px 0;
}

p.two {
  margin: 35px 0;
}

No código acima, <p class="one"> tem uma margem vertical de 20px e <p class="two"> tem uma margem vertical de 35px. Você poderia esperar que o espaço entre eles fosse 20 + 35 = 55px. Por causa do colapso de margens, o espaço real é 35px — o maior dos dois.

Para evitar que duas margens colapsem, separe-as com algo: adicione uma borda ou preenchimento ao elemento pai, ou coloque os elementos em contextos de formatação diferentes (por exemplo, definindo display: flex ou display: grid no contêiner, onde as margens nunca colapsam).

Exemplo de colapso de margens:

Exemplo de Colapso de Margens

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.one {
        margin: 20px 0;
      }
      p.two {
        margin: 35px 0;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="two">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
auto	Define a margem inferior. É o valor padrão desta propriedade.	Experimente »
length	Define uma margem inferior em px, pt, cm, etc. O valor padrão é 0.	Experimente »
%	Define a margem inferior em % do elemento contentor.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

margin-top — a contraparte vertical que define o espaço acima de um elemento (e colapsa com margin-bottom).
margin — a abreviação que define os quatro lados de uma vez.
padding-bottom — espaço dentro da borda inferior do elemento, dentro de sua borda.
box-sizing — controla como largura e altura são medidas; contexto útil ao raciocinar sobre o modelo de caixa.

Prática

Qual é a função da propriedade 'margin-bottom' no CSS?

Define as margens superiores de um elemento.Define as margens inferiores de um elemento.Define o tamanho da fonte de um elemento.Define a cor da borda de um elemento.Cria um espaço abaixo de um elemento para separá-lo dos outros.