X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS margin-right Property

The margin-right property is used to define how much the right margin of the element will be set.

Negative values are allowed.

Initial Value 0
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. Right margin of the element is animatable.
Version CSS2
DOM Syntax object.style.marginRight = "50px";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
      margin-right: 400px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Example where the right margin is specified by "%":

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right { margin-right: 50%;}
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Values

Value Description
auto Sets the right margin. It is the default value of this property.
length Defines a right margin in px, pt, cm, etc. Default value is 0.
% Sets the right margin in % of containing element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Practice Your Knowledge

In the following code snippet, what value is given for the right margin: margin: 6px 12px 5px 15px;



Do you find this helpful?

Related articles