margin-right

The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

{{InteractiveExample("CSS Demo: margin-right")}}

margin-right: 1em;

margin-right: 10%;

margin-right: 10px;

margin-right: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

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

Syntax

/* <length> values */
margin-right: 20px; /* An absolute length */
margin-right: 1em; /* relative to the text size */
margin-right: 5%; /* relative to the nearest block container's width */
margin-right: anchor-size(self-block);
margin-right: calc(anchor-size(--my-anchor height, 20px) / 4);

/* Keyword values */
margin-right: auto;

/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;

The margin-right property is specified as the keyword auto, or a <length>, or a <percentage>. Its value can be positive, zero, or negative.

Values

• {{cssxref("<length>")}}

  • : The size of the margin as a fixed value.
    • For anchor-positioned elements, the {{cssxref("anchor-size()")}} function resolves to a {{cssxref("<length>")}} value relative to the associated anchor element's width or height (see Setting element margin based on anchor size).

• {{cssxref("<percentage>")}}

  • : The size of the margin as a percentage, relative to the inline size (width in a horizontal language, defined by {{cssxref("writing-mode")}}) of the containing block.

• auto

  • : The right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. This table summarizes the different cases:

    <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>

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Setting right margin using pixels and percentages

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}}
• {{cssxref("margin")}} shorthand
• {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, and {{cssxref("margin-inline-end")}}
• {{cssxref("margin-block")}} and {{cssxref("margin-inline")}} shorthands
• CSS box model module