margin-right

  • Revision slug: CSS/margin-right
  • Revision title: margin-right
  • Revision id: 315629
  • Created:
  • Creator: uus
  • Is current revision? No
  • Comment

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.

  • {{ 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() }}
  • Animatable {{ Xref_cssanimatablebutauto() }}
  • {{ Xref_csscomputed() }} the percentage as specified or the absolute length

Syntax

Formal syntax: {{Xref_csslength()}} | {{Xref_csspercentage()}} | auto
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;" />The <code>margin-right</code> <a href="/en/CSS" 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.</p>
<p>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>.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>0</code></li>
  <li><dfn>Applies to</dfn> all elements except those with table display types other than <code>table-caption</code>, <code>table</code>, and <code>inline-table</code></li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Percentages</dfn> refer to {{ Cssxref("width") }} of closest block-level ancestor</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>Animatable</dfn> {{ Xref_cssanimatablebutauto() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> the percentage as specified or the absolute length</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal syntax: {{Xref_csslength()}} | {{Xref_csspercentage()}} | auto</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