Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 25802 of margin-top

  • Revision slug: CSS/margin-top
  • Revision title: margin-top
  • Revision id: 25802
  • Created:
  • Creator: Yuichiro
  • Is current revision? No
  • Comment 16 words added, 2 words removed

Revision Content

{{ CSSRef() }}

Summary

The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: inline and block elements, table, inline-table and table-caption Elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: refer always to width of the containing block
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the percentage as specified or the absolute length

Syntax

margin-top: {{ Xref_csslength() }}| {{ Xref_csspercentage() }}| {{ Cssxref("inherit") }}| {{ Cssxref("auto") }}

Values

<length>
Specifies a fixed width. See {{ xref_csslength() }} for possible values.
<percentage>
 A {{ xref_csspercentage() }} always relative to the width of the containing block.
auto
See {{ cssxref("margin") }}.

Examples

.content { margin-top: 5%; }
.sidebox { margin-top: 10px; }
.logo    { margin-top: -5px; }
#footer  { margin-top: 1em; } 

Specifications

Browser compatibility

Browser Lowest Version auto Value
Internet Explorer 3.0 6.0 in strict Mode
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0)
Opera 3.5 3.5
Safari (WebKit) 1.0 (85) 1.0 (85)

See also

{{ CSS_Reference:Margin() }}

{{ languages( { "de": "de/CSS/margin-top", "ja": "ja/CSS/margin-top" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> margin-top </code>CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.</p>
<ul> <li>{{ Xref_cssinitial() }}: 0</li> <li>Applies to:<code> inline </code>and<code> block </code>elements,<code> table</code>,<code> inline-table </code>and<code> table-caption</code> Elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: refer always to <strong>width</strong> of the containing block</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the percentage as specified or the absolute length</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">margin-top: {{ Xref_csslength() }}| {{ Xref_csspercentage() }}| {{ Cssxref("inherit") }}| {{ Cssxref("auto") }}
</pre>
<h3>Values</h3>
<dl> <dt>&lt;length&gt;</dt> <dd>Specifies a fixed width. See {{ xref_csslength() }} for possible values.</dd> <dt>&lt;percentage&gt;</dt> <dd> A {{ xref_csspercentage() }} always relative to the <strong>width</strong> of the containing block.</dd> <dt>auto</dt> <dd>See {{ cssxref("margin") }}.</dd>
</dl>
<h3>Examples</h3>
<pre class="eval">.content { margin-top: 5%; }
.sidebox { margin-top: 10px; }
.logo    { margin-top: -5px; }
#footer  { margin-top: 1em; } 
</pre>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties">CSS 2.1 box #margin</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th><code>auto </code>Value</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td>6.0 in strict Mode</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ CSS_Reference:Margin() }}</p>
<p>{{ languages( { "de": "de/CSS/margin-top", "ja": "ja/CSS/margin-top" } ) }}</p>
Revert to this revision