Categories
CSS Web development

CSS margin-right Property

CSS margin-right Property

The CSS margin-right property settles the right margin of an element.

Demo:

Click the “Try it” button to change the right margin of the paragraph (50px):



This is my DIV element.


Syntax:

margin-right: auto|length;

auto – the browser calculates the right margin.

length – defines a fixed right margin in px, cm, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  margin-right: 200px;
}
</style>
</head>
<body>


<p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
<p class="ex1">This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.</p>
<p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.This is a paragraph with a 200px right margin.

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.


Read also:

CSS backface-visibility Property

CSS border-right Property

CSS bottom Property