Which property specifies the right padding of an element in CSS ?
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> <!-- margin-right property --> <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> <!-- margin-right property --> <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> <!-- margin-right property --> <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:
Please Login to comment...