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>
<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: 
Example: In this example, we use margin-right: auto; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
margin-right property
</title>
<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: 
Example: In this example, we use margin-right: initial; property.
html
<!DOCTYPE html>
<html>
<head>
<title>
margin-right property
</title>
<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:
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
13 Jun, 2023
Like Article
Save Article