CSS margin-right - Examples

CSS margin-right Property

CSS margin-right property sets the right side margin to HTML Element(s).

The syntax to specify a value for margin-right property is

margin-right: value;

The following table gives the possible values that could be given to margin-right property.

Value	Description	Examples
length	Any valid CSS length unit. Refer CSS Length Units tutorial.	margin-right: 10px;margin-right: 5pt;margin-right: 2cm;
Percentage Value	Right margin in percent of the width of the containing element.	margin-right: 20%;
initial	Sets margin-right to default value.	margin-right: initial;
inherit	Inherits margin-right value from its parent element.	margin-right: inherit;

Examples

In the following examples, we set right margin to HTML Element(s) with a few allowed values for margin-right CSS property.

Simple Example for margin-right

The following is a simple example, where we set margin-right for paragraph with 50px.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            border: 1px solid;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 50px right margin.</p>
</body>
</html>

Different Values for margin-right

The following is a simple example, where we set different margin-right values for paragraphs.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p {
            border: 1px solid #CCC;
        }
        #p1 {
            margin-right: 50px;
        }
        #p2 {
            margin-right: 0px;
        }
        #p3 {
            margin-right: 20px;
        }
        #p4 {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 50px right margin.</p>
    <p id="p2">A paragraph with 0px right margin.</p>
    <p id="p3">A paragraph with 20px right margin.</p>
    <p id="p4">A paragraph with 10px right margin.</p>
</body>
</html>

margin-right with CSS Length Units

In the following example, we apply margin-right property to paragraphs with a few different CSS Length Unit values.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p {
            border: 1px solid #CCC;
        }
        #p1 {
            margin-right: 100px;
        }
        #p2 {
            margin-right: 2in;
        }
        #p3 {
            margin-right: 100pt;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 100px right margin.</p>
    <p id="p2">A paragraph with 2in right margin.</p>
    <p id="p3">A paragraph with 100pt right margin.</p>
</body>
</html>

margin-right with Percentage Values

In the following example, we apply margin-right property to paragraphs with a few different percentage values.

If margin-right is specified in percentage values, and if width of the HTML element changes, then the margin also changes. For example, try to resize the browser window, and observe the right margin for these HTML Elements.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p {
            border: 1px solid #CCC;
        }
        #p1 {
            margin-right: 5%;
        }
        #p2 {
            margin-right: 10%;
        }
        #p3 {
            margin-right: 20%;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 5% right margin.</p>
    <p id="p2">A paragraph with 10% right margin.</p>
    <p id="p3">A paragraph with 20% right margin.</p>
</body>
</html>

margin-right for a few HTML elements

In the following example, we take a few HTML elements like h1, p, a, and pre, and set margin-right for these.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1, p, a, pre {
            display: block;
            border: 1px solid #CCC;
        }
        h1 {
            margin-right: 150px;
        }
        p {
            margin-right: 70px;
        }
        a {
            margin-right: 50px;
        }
        pre {
            margin-right: 200px;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <p>A paragraph.</p>
    <a href="#">Anchor Text</a>
    <pre>pre
hello
world</pre>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about margin-right property, and how to use this property for HTML Elements, with examples.