1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: margin-bottom
slug: Web/CSS/margin-bottom
translation_of: Web/CSS/margin-bottom
---
<div>{{CSSRef}}</div>
<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>margin-bottom</code></strong> define a <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">margin area</a> na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.</p>
<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
<p class="hidden">A fonte desse exemplo interativo é armazenada em um repositório do GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envia um pull request</p>
<p><img alt="The effect of the CSS margin-bottom property on the element box" src="/files/4045/margin-bottom.svg" style="border: 1px solid; display: block; height: 130px; margin-left: auto; margin-right: auto; width: 400px;"></p>
<p>A propriedade não tem efeito em non-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced</a> elementos inline, como {{HTMLElement("span")}} ou {{HTMLElement("code")}}.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush:css no-line-numbers">/* <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;
</pre>
<p>A propriedade <code>margin-bottom</code> é especificada como a palavra chave <code>auto</code>, ou a <code><length></code>, ou a<code><percentage></code>. Esse valor pode ser positivo, zero ou negativo</p>
<h3 id="Values" name="Values">Values</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>O tamanho de uma margin com um valor fixo</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>O tamanho de uma margin como porcentagem, é relativa com o <em>tamanho</em> do bloco pai.</dd>
<dt><code>auto</code></dt>
<dd>O navegador seleciona um valor adequado para usar. Veja {{cssxref("margin")}}.</dd>
</dl>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Example" name="Example">Exemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<p>CSS para definir margin-bottom e height</p>
<pre class="brush: 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;
}
</pre>
<p>Algumas definições para container e divs, para que o os efeitos de margin possam ser vistos com mais clareza</p>
<pre class="brush: css">.container {
background-color:orange;
width:320px;
border:1px solid black;
}
div {
width:320px;
background-color:gold;
}</pre>
<p>{{ EmbedLiveSample('Example',350,200) }}</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Nenhuma mudança significativa</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Definir o <code>margin-bottom</code> como "animavel"</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Remove seu efeito nos elementos in-line.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade dos Browsers</h2>
<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request</div>
<p>{{Compat("css.properties.margin-bottom")}}</p>
|
