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.

Try it
------

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

Syntax
------


```css
/\* <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 \*/

/\* 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

`<length>`

The size of the margin as a fixed value.

`<percentage>`

The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by `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:

| Value of `display` | Value of `float` | Value of `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
 `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 |

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

Formal syntax
-------------
```

margin-right =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting right margin using pixels and percentages


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

Specifications
--------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `margin-top`, `margin-bottom`, and `margin-left` and the `margin` shorthand
* The mapped logical properties: `margin-block-start`, `margin-block-end`, `margin-inline-start`, and `margin-inline-end` and the shorthands `margin-block` and `margin-inline`