MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 25833 of margin-left

  • Revision slug: CSS/margin-left
  • Revision title: margin-left
  • Revision id: 25833
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 1 words added

Revision Content

{{ CSSRef() }}

Summary

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

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements except those with table display types other than table-caption, table, and inline-table
  • {{ Xref_cssinherited() }}: no
  • Percentages: refer to {{ Cssxref("width") }} of closest block-level ancestor
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the percentage as specified or the absolute length

Syntax

margin-left: {{ 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-left: 5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support  1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
auto value  1.0 1.0 (1.0) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ CSS_Reference:Margin() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>margin-left</code> <a href="/en/CSS" title="CSS">CSS</a> property of an element sets the margin space required on the left side of an element. A negative value is also allowed.</p>
<ul> <li>{{ Xref_cssinitial() }}: <code>0</code></li> <li>Applies to: all elements except those with table display types other than <code>table-caption</code>, <code>table</code>, and <code>inline-table</code></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: refer to {{ Cssxref("width") }} of closest block-level ancestor</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the percentage as specified or the absolute length</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">margin-left: {{ Xref_csslength() }} | {{ Xref_csspercentage() }} | {{ Cssxref("inherit") }} | {{ Cssxref("auto") }};
</pre>
<h3 name="Values">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 name="Examples">Examples</h3>
<pre>.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#margin-left">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties">CSS 2.1 box</a></li>
</ul>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<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>Basic support</td> <td> 1.0</td> <td>1.0 (1.0)</td> <td>3.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> <tr> <td><code>auto</code> value</td> <td> 1.0</td> <td>1.0 (1.0)</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>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>See also</h3>
<p>{{ CSS_Reference:Margin() }}</p>
<p>{{ languages( { "de": "de/CSS/margin-left", "ja": "ja/CSS/margin-left" } ) }}</p>
Revert to this revision