mozilla

Revision 541071 of margin-right

  • Revision slug: Web/CSS/margin-right
  • Revision title: margin-right
  • Revision id: 541071
  • Created:
  • Creator: trevorh
  • Is current revision? No
  • Comment Summary

Revision Content

{{ CSSRef() }}

Summary

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

The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.

{{cssbox("margin-right")}}

Syntax

Formal syntax: {{csssyntax("margin-right")}}
margin-right: 20px;        /* An absolute length */
margin-right: 1em;         /* A length relative to the text size */
margin-right: 5%;          /* A margin relative to the nearest block container's width */
margin-right: auto;

margin-right: inherit;

Values

<length>
Is a {{xref_csslength()}} specifying a fixed width: it can be absolute width, e.g. in px, or a width relative to the text size, e.g. in em, or relative to the viewport size, e.g. in vh.
<percentage>
Is a {{xref_csspercentage()}} relative to the width of the nearest containing block.
auto
Is a keyword indicating that the right margin receives a share of the remaining space, defined mainly by the current layout mode.. If there several auto values for margin-left or margin-right, the calculated space is evenly distributed between all the auto values. This table summarizes the different cases:
Value of {{cssxref("display")}} Value of {{cssxref("float")}} Value of {{cssxref("position")}} Computed value of auto Comment
inline, inline-block, inline-table any static or relative 0 Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent. Block layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 Block layout mode (floating element)
any table-*, except table-caption any any 0 Internal table-* elements don't have margins, use {{ cssxref("border-spacing") }} instead
any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed. Absolutely positioned layout mode
flex, inline-flex any any 0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins. Flexbox layout mode

Examples

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }

Specifications

Specification Status Comment
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }} {{ Spec2('CSS3 Box') }} No significant change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }} {{ Spec2('CSS3 Transitions') }} Defines margin-right as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}} {{ Spec2('CSS3 Flexbox') }} Defines the behavior of margin-right on flex items.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }} {{ Spec2('CSS2.1') }} Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin-right', 'margin-right') }} {{ Spec2('CSS1') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

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

See also

  • {{ CSS_Reference:Margin() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p><img alt="The effect of the CSS margin-right property on the element box" src="/files/4041/margin-right.svg" style="border: solid 1px; width: 400px; height: 200px; margin-right: 1em; margin-bottom: 1em; float: left;" /><span class="seoSummary">The <code>margin-right</code> <a href="mailto:setiawan345@rocketmail.com?subject=%5Berrkk%5D&amp;body=terrreeh" title="CSS">CSS</a> property of an element sets the margin space required on the right side of an element. A negative value is also allowed.</span></p>
<p><span class="seoSummary">The vertical margins of two adjacent boxes may fuse. This is called <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing" title="/en-US/docs/CSS/margin_collapsing"><em>margin collapsing</em></a>.</span></p>
<p>{{cssbox("margin-right")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("margin-right")}}</pre>
<pre>
margin-right: 20px;        /* An absolute length */
margin-right: 1em;         /* A length relative to the text size */
margin-right: 5%;          /* A margin relative to the nearest block container's width */
margin-right: auto;

margin-right: inherit;
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
 <dt>
  <code>&lt;length&gt;</code></dt>
 <dd>
  Is a {{xref_csslength()}} specifying a fixed width: it can be absolute width, e.g. in <code>px</code>, or a width relative to the text size, e.g. in <code>em</code>, or relative to the viewport size, e.g. in <code>vh</code>.</dd>
 <dt>
  <code>&lt;percentage&gt;</code></dt>
 <dd>
  Is a {{xref_csspercentage()}} relative to the <em>width</em> of the nearest containing block.</dd>
 <dt>
  <code>auto</code></dt>
 <dd>
  Is a keyword indicating that the right margin receives a share of the remaining space, defined mainly by the current layout mode.. If there several <code>auto</code> values for <code>margin-left</code> or <code>margin-right</code>, the calculated space is evenly distributed between all the <code>auto</code> values. This table summarizes the different cases:<br />
  <table class="standard-table">
   <thead>
    <tr>
     <th scope="col">Value of {{cssxref("display")}}</th>
     <th scope="col">Value of {{cssxref("float")}}</th>
     <th scope="col">Value of {{cssxref("position")}}</th>
     <th scope="col">Computed value of <code>auto</code></th>
     <th scope="col">Comment</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
     <th><em>any</em></th>
     <th><code>static</code> or <code>relative</code></th>
     <td><code>0</code></td>
     <td>Inline layout mode</td>
    </tr>
    <tr>
     <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
     <th><em>any</em></th>
     <th><code>static</code> or <code>relative</code></th>
     <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td>
     <td>Block layout mode</td>
    </tr>
    <tr>
     <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
     <th><code>left</code> or <code>right</code></th>
     <th><code>static</code> or <code>relative</code></th>
     <td><code>0</code></td>
     <td>Block layout mode (floating element)</td>
    </tr>
    <tr>
     <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th>
     <th><em>any</em></th>
     <th><em>any</em></th>
     <td><code>0</code></td>
     <td>Internal <code>table-*</code> elements don't have margins, use {{ cssxref("border-spacing") }} instead</td>
    </tr>
    <tr>
     <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th>
     <th><em>any</em></th>
     <th><em><code>fixed</code></em> or <code>absolute</code></th>
     <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td>
     <td>Absolutely positioned layout mode</td>
    </tr>
    <tr>
     <th><code>flex</code>, <code>inline-flex</code></th>
     <th><em>any</em></th>
     <th><em>any</em></th>
     <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td>
     <td>Flexbox layout mode</td>
    </tr>
   </tbody>
  </table>
 </dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="eval">
.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>No significant change.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Defines <code>margin-right</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
   <td>{{ Spec2('CSS3 Flexbox') }}</td>
   <td>Defines the behavior of <code>margin-right</code> on flex items.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Removes its effect on inline elements.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</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>Basic support</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>auto</code> value</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&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</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>
<h3 id="See_also">See also</h3>
<ul>
 <li>{{ CSS_Reference:Margin() }}</li>
</ul>
Revert to this revision