Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
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 julho de 2015.
* Some parts of this feature may have varying levels of support.
A propriedadeCSSmargin-bottom define amargin 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
margin-bottom: 1em;margin-bottom: 10%;margin-bottom: 10px;margin-bottom: 0;<section> <div> <div></div> <div></div> <div></div> </div></section>#container { width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start;}.row { height: 33.33%; display: inline-block; border: solid #ce7777 10px; background-color: #2b3a55; flex-shrink: 0;}#example-element { border: solid 10px #ffbf00; background-color: #2b3a55;}
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 propriedademargin-bottom é especificada como a palavra chaveauto, 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 otamanho do bloco pai.
autoO 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
<div> <div>Box 0</div> <div>Box 1</div> <div>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
| Specification |
|---|
| CSS Box Model Module Level 3 # margin-physical |
| Initial value | 0 |
|---|---|
| Aplica-se a | all elements, except elements with tabledisplay types other thantable-caption,table andinline-table. It also applies to::first-letter. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | alength |