The padding-right property in CSS is used to add space between the content and the right border of an element. It helps improve spacing and alignment within webpage elements.
- It sets the width of the right padding area of an element.
- Padding is the space between the content and the border.
- The value can be defined using units like px, %, or em.
Syntax:
padding-right: length | percentage | initial | inherit;Property values:
- length: This mode is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.
- percentage: This mode is used to set the right padding in percent of the width of the element. It must be non-negative.
- initial: This property is used to set the default value.
Example: Here, we use padding-right: length; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
padding-right Property
</title>
<!--Driver Code Ends-->
<style>
.geek {
padding-right: 200px;
color: white;
background: green;
width: 50%;
font-size: 18px;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="text-align:center">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
padding-right Property
</h2>
<!-- padding-right property used here -->
<p class="geek">
This paragraph has a padding-right: 200px;
</p>
</body>
</html>
<!--Driver Code Ends-->
Example: Here, we are using padding-right: percentage; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
padding-right Property
</title>
<!--Driver Code Ends-->
<style>
.geek {
padding-right: 40%;
color: white;
background: green;
width: 50%;
font-size: 18px;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="text-align:center">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
padding-right Property
</h2>
<!-- padding-right property used here -->
<p class="geek">
This paragraph has a padding-right: 40%;
</p>
</body>
</html>
<!--Driver Code Ends-->
Example: Here, we are using padding-right: initial; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
padding-right Property
</title>
<!--Driver Code Ends-->
<style>
.geek {
padding-right: initial;
color: white;
background: green;
width: 70%;
font-size: 25px;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="text-align:center">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
padding-right Property
</h2>
<!-- padding-right property used here -->
<p class="geek">
This paragraph has a padding-right: initial;
</p>
</body>
</html>
<!--Driver Code Ends-->