margin-right

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

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

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

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

<length>

The size of the margin as a fixed value.

For anchor-positioned elements, the anchor-size() function resolves to a <length> value relative to the associated anchor element's width or height (see Setting element margin based on anchor size).

<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 |
 <anchor-size()> 

<length-percentage> = 
 <length> |
 <percentage> 

<anchor-size()> = 
 anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? ) 

<anchor-name> = 
 <dashed-ident> 

<anchor-size> = 
 width |
 height |
 block |
 inline |
 self-block |
 self-inline

Examples

Setting right margin using pixels and percentages

css

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

Specifications

Specification
CSS Box Model Module Level 3 # margin-physical

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Nov 7, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content