margin-right property CSS Reference

Definition and Usage

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

• Initial 0
• Applies to all elements except elements with table display types other than table-caption, table and inline-table
• Inherited no
• Percentages refer to the width of the containing block
• Media visual
• Computed Value the percentage as specified or the absolute length
• Animatable yes, as a length
• Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <length> | <percentage> | 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 <length> 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 <percentage> 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 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

Examples

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

Compatibility

Desktop browsers

Mobile browsers