Which property specifies the right padding of an element in CSS ?
Last Updated :
26 Jun, 2022
In this article, we will discuss the property that specifies the right padding of an element.
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 the 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.
- auto: This property is used when it is desired and is determined by the browser.
- initial: It sets the value of right-margin to its default value.
- inherit: This property is inherited from its parent
Example 1: In this example, we will demonstrate the margin-right with the length attribute.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
margin-right property
</ title >
< style >
h1 {
margin-right: 100px;
border:1px solid black;
color: green;
}
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 2: In this example, we will demonstrate the margin-right with the auto attribute.
HTML
<!DOCTYPE html>
< html >
< head >
< title > margin-right property</ title >
< style >
h1
{
margin-right:auto;
border:1px solid black;
color: green;
}
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 3: In this example, we will demonstrate the margin-right with the initial attribute.
HTML
<!DOCTYPE html>
< html >
< head >
< title > margin-right property</ title >
< style >
h1
{
margin-right: initial;
border:1px solid black;
color:green;
}
h2
{
margin-right:initial;
border:1px solid black;
}
</ style >
</ head >
< body style = "text-align:center" >
< h1 >GeeksforGeeks</ h1 >
< h2 >margin-right property</ h2 >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...