files/pt-br/web/css/margin-top/index.html


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

---
title: margin-top
slug: Web/CSS/margin-top
translation_of: Web/CSS/margin-top
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Sumário</h2>

<p><img alt="The effect of the CSS margin-top property on the element box" src="/files/4101/margin-top.svg" style="border-style: solid; border-width: 1px; float: left; margin-bottom: 2em; margin-right: 1em;"><span class="seoSummary">A propriedade CSS <strong><code>margin-top</code></strong> de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.</span></p>

<p><span class="seoSummary">Essa propriedade não tem efeito em <em>elementos non-replaced</em> inline elements, como {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</span></p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="brush:css">/* Valores &lt;length&gt; */
margin-top: 10px;        /* An absolute length */
margin-top: 1em;         /* A length relative to the text size */
margin-top: 5%;          /* A margin relative to the nearest block container's width */

/* Valores padrão */
margin-top: auto;

/* Valores globais */
margin-top: inherit;
margin-top: initial;
margin-top: unset;
</pre>

<h3 id="Values" name="Values">Valores</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Especifica um tamanho fixo. Veja {{cssxref("&lt;length&gt;")}} para possíveis valores.</dd>
 <dt><code>&lt;porcentagem&gt;</code></dt>
 <dd>Um {{cssxref("&lt;percentage&gt;")}} sempre relativo ao <strong>width</strong> do bloco.</dd>
 <dt><code>auto</code></dt>
 <dd>Veja {{cssxref("margin")}}.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">Exemplos</h2>

<pre class="brush:css;">.content { margin-top:   5%; }
.sidebox { margin-top: 10px; }
.logo    { margin-top: -5px; }
#footer  { margin-top:  1em; }
</pre>

<h2 id="Specifications" name="Specifications">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', '#the-margin', 'margin-top')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>Sem mudança significativa.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Define <code>margin-top</code> como animável.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Remove esse efeito em elementos inline.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>Valor auto</code></td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>6.0 (strict mode)</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>