What is CSS Margin Right?
In CSS, margin-right is the property to set the margin of the right side of the element where this property is used to set the right part of the element or right border of the page. This property also does not support negative values and it can take any positive numbers as the values and it takes “zero” as the default value.
Functions of CSS Margin Right Property
The margin property of CSS is used to set the space around elements or borders of the page. The margin sets clear the space around an element usually it is outside the border. The margin property of CSS has values for the elements and they are margin-top, margin-bottom, margin-left, margin-right.
Syntax
Margin-right: margin_value;- margin_value can be length or percentage or auto or initial or inherit.
In general, this margin-right property with few values of negative values, positive values, etc is demonstrated below.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin-right: -4px;
}
p.ex2 {
margin-right: 35em;
}
p.ex3 {
margin-right: 450px;
}
</style>
</head>
<body>
<h1>The margin-right Property</h1>
<p class ="ex1"> This paragraph is to show the example of margin right as negative value </p>
<p class="ex2"> This paragraph to show the margin right taking value in "em" units </p>
<p class ="ex3">This paragraph is to show the margin value as positive value</p>
</body>
</html>Output
In the above program, we have first declared the first paragraph as negative value with -4px pixels to right, and we are declaring some length value as 35em which will write the paragraph to the right and similarly the third paragraph as positive value with 450 px pixels to the right of the element or page.
Examples of CSS Margin Right
Let us see the above margin value for margin-right with examples.
1. Length
This value is used to set the margin value for margin-right which is used to set a fixed value and its units are like pixels (px), centimeter (cm), points (pt), etc. This property allows us to set negative values and has zero as the default value.
Syntax:
margin-right : length;Example
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
h1 {
margin-right: 100px;
border:3px solid red;
}
h2 {
margin-right:550px;
border:4px solid blue;
}
</style>
</head>
<body style = "text-align:center">
<h1> This is the article on margin properties of CSS </h1>
<h2> In this example we are discussing about margin-right: length property of CSS</h2>
</body>
</html>Output
2. Percentage
This is a margin value for the margin-right property which is relative to the width of the elements containing blocks of texts. This property value is specified in percentage.
Syntax
margin-right: margin value in percentage;Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
margin-right: 80%;
}
</style>
</head>
<body>
<h1>The margin-right : percentage value Property</h1>
<p>This is the article on margin properties of CSS </p>
<p class="ex1">In this example we are discussing about margin-right: percentage value property of CSS</p>
<p>This example is about how we specify the value of 80%</p>
</body>
</html>Output
In the above program, we have specified margin-right of 80% which only that paragraph will be written 80% of the right side of the element and hence you can see the output in the above screenshot.
3. Auto
This property value is set by the browser itself which means it is used when it is desired and it is calculated by the browser itself.
Syntax
margin-right: auto;Example
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
h1 {
margin-right: auto;
border:5px solid yellow;
}
h2 {
margin-right:auto;
border:1px solid green;
}
</style>
</head>
<body style = "text-align:center">
<h1> This is the article on margin properties of CSS </h1>
<h2> In this example we are discussing about margin-right: auto property of CSS </h2>
</body>
</html>Output
In the above program, we can see that we have set the border to 5px with yellow color and another border with 1 px in green color.
4. Initial
This property is used to set the margin-right value to its default value.
Syntax
margin-right : initial;Example
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
h1 {
margin-right: initial;
border:2px solid pink;
}
h2 {
margin-right:initial;
border:3px solid orange;
}
</style>
</head>
<body style = "text-align:center">
<h1> This is the article on margin properties of CSS </h1>
<h2> In this example we are discussing about margin-right: initial property of CSS </h2>
</body>
</html>Output
In the above program, we have declared the initial value as the margin-right value which we have set the border as 2px with pink color and 3px border with orange color.
In this article, we also have inherit as one value for the margin-right property which actually inherits the value from its parent element.
Conclusion
The margin-right property of CSS has again different values such as length which can have positive or negative values with units like pixels (px), centimeter (cm), em, etc, the auto is used to set the desired value, the initial value is used to set the default value, inherit values is used to inherit the values from its parent element. This property has zero pixels as the default value if any of the above values are not specified.
Recommended Articles
This is a guide to CSS Margin Right. Here we discuss a brief overview on CSS Margin Right and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –
9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
