CSS margin-right Property

CSS margin-right property sets the margin of the right of an element. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’ or even in percentage(%).

It can have a positive, negative or zero value.

Example:

.p1{
  margin-right: 20px;
}
.p2{
  margin-right: 3em;
}
.p3{
  margin-right: 10%;
}

It is also possible to set a negative margin value. In this situation, the element pulls itself in the right direction and a horizontal scroll bar is added to the page if it exceeds the window size. See the example below:

Example:

p{
  margin-right: -100px;
}

CSS Syntax

The margin-right property has the following syntax:

margin-right: length|percentage|auto|initial|inherit;

Property Values

The margin-right property accepts the following values:

lengthSets a fixed right margin in CSS length formats such as ‘px’, ’em’, ‘rem’, etc. It can be positive, negative or zero. The default value is zero(0).
percentageSets right margin in percentage. The percentage value is calculated by taking the percentage of the element’s width itself.
autoThe browser itself calculates the margin value.
initialSets the margin-right property to its default value(0).
inheritInherits the margin-right property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.marginRight = “50px”