CSS margin-right Property

The margin-right property in CSS is used to add space on the right side of an element. It helps create proper spacing and alignment in webpage layouts.

It sets the right margin area of an element.
Negative values are allowed in margin-right.
The default value of the margin-right property is 0.

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 the browser determines it.
initial It sets the value of the right-margin to its default value.

Example: Here, we use margin-right: length; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>
        margin-right property
    </title>

<!--Driver Code Ends-->

    <!-- margin-right property -->
    <style>
        h1 {
            margin-right: 100px;
            border: 1px solid black;
        }

        h2 {
            margin-right: 250px;
            border: 1px solid black;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>margin-right property</h2>
</body>
</html>
<!--Driver Code Ends-->

Example: Here, we use margin-right: auto; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>
        margin-right property
    </title>

<!--Driver Code Ends-->

    <!-- margin-right property -->
    <style>
        h1 {
            margin-right: auto;
            border: 1px solid black;
        }

        h2 {
            margin-right: auto;
            border: 1px solid black;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>margin-right property</h2>
</body>
</html>
<!--Driver Code Ends-->

Example: Here, we use margin-right: initial; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>
        margin-right property
    </title>

<!--Driver Code Ends-->

    <!-- margin-right property -->
    <style>
        h1 {
            margin-right: auto;
            border: 1px solid black;
        }

        h2 {
            margin-right: auto;
            border: 1px solid black;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>margin-right property</h2>
</body>
</html>
<!--Driver Code Ends-->

CSS margin-right Property

Explore