CSS margin-right

The CSS margin-right property is used to create right margin around specified element, or around the border of specified element (if element has a border). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-right: 120px;}
   </style>
</head>
<body>
   
   <div>This DIV has a right margin of 120px. 
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Odio mollitia recusandae officiis vero sint aperiam inventore eum eos
      illum quos a placeat, dolor quo accusantium natus voluptatem, doloremque
      eligendi neque quia tempora nihil obcaecati magni labore earum. Nisi,
      perferendis beatae.</div>
   
</body>
</html>

Output

This DIV has a right margin of 120px. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio mollitia recusandae officiis vero sint aperiam inventore eum eos illum quos a placeat, dolor quo accusantium natus voluptatem, doloremque eligendi neque quia tempora nihil obcaecati magni labore earum. Nisi, perferendis beatae.

CSS margin-right Syntax

The syntax of margin-right property in CSS, is:

margin-right: x;

The value of x should be any of the following:

auto - used to allow browser to create right margin. The default value is 0.
length - used to create custom sized right margin.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - To learn about margin in detail, refer to its separate tutorial.

CSS margin-right Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b{border: 2px solid blue;}
      .b{margin-right: 80px; padding: 12px;}
   </style>
</head>
<body>
   
   <div class="a">
      <div class="b">This DIV has a right margin of 80px</div>
   </div>
   
</body>
</html>

Output

This DIV has a right margin of 80px

CSS Online Test

« Previous Tutorial Next Tutorial »