Open In App

CSS margin-right Property

Improve
Improve
Like Article
Like
Save
Share
Report

The margin-right property in CSS is used to set the right margin of an element. It sets the margin-area on the right side of the element. Negative values are also allowed. The default value of margin-right property is zero. 

Syntax:

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

Property Value:

  • length: This property is used to set a fixed value defined in px, cm, pt etc. The negative value is allowed and the default value is 0px. 
  • inherit: This property is inherited from its parent.
  • auto: This property is used when it is desired and it is determined by browser. 
  • initial It sets the value of right-margin to its default value. 

Example: In this example, we are using margin-right: length; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        margin-right property
    </title>
 
    <!-- margin-right property -->
    <style>
        h1 {
            margin-right: 100px;
            border: 1px solid black;
        }
 
        h2 {
            margin-right: 250px;
            border: 1px solid black;
        }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>margin-right property</h2>
</body>
</html>


Output: margin right

Example: In this example, we use margin-right: auto; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        margin-right property
    </title>
 
    <!-- margin-right property -->
    <style>
        h1 {
            margin-right: auto;
            border: 1px solid black;
        }
 
        h2 {
            margin-right: auto;
            border: 1px solid black;
        }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>margin-right property</h2>
</body>
</html>


Output: margin-right

Example: In this example, we use margin-right: initial; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        margin-right property
    </title>
 
    <!-- margin-right property -->
    <style>
        h1 {
            margin-right: auto;
            border: 1px solid black;
        }
 
        h2 {
            margin-right: auto;
            border: 1px solid black;
        }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>margin-right property</h2>
</body>
</html>


Output: margin-right

Supported Browsers: The browser supported by margin-right property are listed below:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 3.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads