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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: margin
slug: Web/CSS/margin
tags:
- CSS
- CSS Property
- Reference
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<div>{{CSSRef}}</div>
<p>A propriedade <strong><code>margin</code></strong> do <a href="/pt-BR/docs/Web/CSS" title="CSS">CSS</a> define a <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">área de margem</a> nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, e {{cssxref("margin-left")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
<p class="hidden">O código fonte para este exemplo interativo está armazenado em um repositório GitHub. Se você desejar contribuir para o projeto de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um <em>pull request</em>.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush:css no-line-numbers">/* Aplica para todos os quatro lados */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* topo | horizontal | inferior */
margin: 1em auto 2em;
/* topo | direita | inferior | esquerda */
margin: 2px 1em 0 auto;
/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;
</pre>
<p>A propriedade <code>margin</code> pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um <code><a href="#<length>"><length></a></code>, uma <code><a href="#<percentage>"><percentage></a></code>, ou a palavra-chave <code><a href="#auto">auto</a></code>. Cada valor pode ser positivo, zero ou negativo.</p>
<ul>
<li>Quando <strong>um</strong> valor é especificado, a mesma margem é aplicada para <strong>todos os quatro lados</strong>.</li>
<li>Quando <strong>dois</strong> valores são especificados, a primeira margem é aplicada aos <strong>lados</strong> <strong>superior e inferior,</strong> e a segunda aos <strong>lados</strong> <strong>esquerdo e direito</strong>.</li>
<li>Quando <strong>três</strong> valores são especificados, a primeira margem é apliacada ao <strong>topo</strong>, a segunda aos <strong>lados</strong> <strong>esquerdo e direito</strong>, e a terceira ao <strong>lado</strong> <strong>inferior</strong>.</li>
<li>Quando <strong>quatro</strong> valores são especificados, as margens são aplicadas aos lados <strong>superior</strong>, <strong>direito</strong>, <strong>inferior</strong> e <strong>esquerdo</strong>, nesta ordem (sentido horário).</li>
</ul>
<h3 id="Valores">Valores</h3>
<dl>
<dt><strong>{{cssxref("length")}}</strong></dt>
<dd>O tamanho da margem como um valor fixo.</dd>
<dt>{{cssxref("percentage")}}</dt>
<dd>O tamanho da margem como um percetual, relativo à <em>largura</em> do bloco em que o elemento está contido.</dd>
<dt><code>auto</code></dt>
<dd>O navegador seleciona uma margem adequada para utilizar. Por exemplo, em alguns casos este valor pode ser utilizado para centralizar o elemento.</dd>
</dl>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
{{csssyntax}}
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Exemplo_simples">Exemplo simples</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="center">Este elemento está centralizado.</div>
<div class="outside">Este elemento está posicionado fora de seu bloco recipiente.</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight:[2,8]">.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}</pre>
<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>
<h3 id="Mais_exemplos">Mais exemplos</h3>
<pre class="brush: css">margin: 5%; /* todos os lados: margem de 5% */
margin: 10px; /* todos os lados: margem de 10px */
margin: 1.6em 20px; /* topo e inferior: margem de 1.6em */
/* esquerda e direita: margem de 20px */
margin: 10px 3% 1em; /* topo: margem de 10px */
/* esquerda e direita: margem de 3% */
/* inferior: margem de 1em */
margin: 10px 3px 30px 5px; /* topo: margem de 10px */
/* direita: margem de 3px */
/* inferior: margem de 30px */
/* esquerda: margem de 5px */
margin: 2em auto; /* topo e inferior: margem de 2em */
/* caixa está horizontalmente centralizada */
margin: auto; /* topo e inferior: margem de 0 */
/* caixa está horizontalmente centralizada */
</pre>
<h2 id="Notas">Notas</h2>
<h3 id="Centralização_horizontal">Centralização horizontal</h3>
<p>Para centralizar algo horizontalmente em navegadores modernos, você pode utilizar <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code></p>
<p>Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, estes não estão disponíveis. Para centralizar um elemento dentro de seu pai, use <code>margin: 0 auto;</code> .</p>
<h3 id="Colapso_de_margens">Colapso de margens</h3>
<p>Às vezes, as margens superior e inferior de elementos são colapsadas em uma única margem que é igual à maior das duas margens. Veja <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing">Dominando margin collapsing</a> para mais informações.</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', 'margin') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>Nenhuma mudança significativa.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Define <code>margin</code> como animável.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Remove seu efeito em elementos <em>inline</em>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<div class="hidden">A tabela de compatibildade nesta página é gerada de um dados estruturados. Se você desejar contribuir com estes dados, por favor, faça <em>check out</em> do <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em>pull request</em>.</div>
<p>{{Compat("css.properties.margin")}}</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
<li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Margin collapsing</a></li>
</ul>
|
