CSS - margin-right Property

Quiz

CSS margin-right property sets the width of the margin on the right of an element.

Syntax

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

Property Values

Value	Description
auto	The browser sets the margin for right edge automatically. Default.
length	The margin space of right edge is set using length units (e.g. px, em, rem etc.). Negative values are allowed.
percentage	The margin space of right edge is set using percentage values (e.g. 10%) relative to the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Margin Right Property

The following examples explain the margin-right property with different values.

Margin Right Property with Auto Value

To allow the browser to automatically calculate the right margin based on the available space, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 70px;
         width: 490px;
         border: 2px solid gray;
         direction: rtl;
      }

      .box {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
         margin-right: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-right property
   </h2>
   <h4>
      margin-right: auto;
   </h4>
   <div class="container">
      <div class="box">
         This box has margin-right: auto
      </div>
   </div>

</body>

</html>

Margin Right Property with Length Values

To set the right margin, we can specify the margin size using length units (e.g. px, em, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 70px;
         width: 490px;
         border: 2px solid gray;
         direction: rtl;
      }

      .props {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
      }

      .box1 {
         margin-right: 80px;
      }

      .box2 {
         margin-right: 10em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-right property
   </h2>
   <h4>
      margin-right: 80px;
   </h4>
   <div class="container">
      <div class="box1 props">
         This box has margin-right: 80px
      </div>
   </div>
   <h4>
      margin-right: 10em;
   </h4>
   <div class="container">
      <div class="box2 props">
         This box has margin-right: 10em
      </div>
   </div>

</body>

</html>

Margin Right Property with Percentage Values

To set the right margin, we can specify the margin size using percentage values(e.g. 10% (of the width of the containing element)). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding-top: 40px;
         padding-bottom: 40px;
         height: 90px;
         width: 490px;
         border: 2px solid gray;
         direction: rtl;
      }

      .props {
         background-color: lightblue;
         padding: 10px;
         text-align: center;
         width: 30%;
      }

      .box1 {
         margin-right: 20%;
      }

      .box2 {
         margin-right: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-right property
   </h2>
   <h4>
      margin-right: 20%;
   </h4>
   <div class="container">
      <div class="box1 props">
         This box has margin-right: 20% 
         of the width of the container
      </div>
   </div>
   <h4>
      margin-right: 50%;
   </h4>
   <div class="container">
      <div class="box2 props">
         This box has margin-right: 50% 
         of the width of the container
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
margin-right	1.0	6.0	1.0	1.0	3.5

css_reference.htm

Print Page