Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Which property specifies the right padding of an element in CSS?
In CSS, the padding property allows us to add extra space between the HTML element's border and its content. The right padding means only adding the space between the element's content and the right border.
Here, we will learn two different properties to specify the right padding of an element.
Syntax
selector {
padding-right: value;
}
Use the padding-right CSS Property
The padding-right property specifies the right padding of an element in CSS. Whenever we specify the right padding for an element, the width of the element becomes equal to the actual width + right padding.
Example 1: Basic Right Padding
In the example below, the parent div contains multiple child divs. Using the padding-right CSS property, we have specified the right padding of 300px for the parent div. Also, we have specified the padding-right of 100px for all child div elements
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 300px;
height: 400px;
border: 2px solid red;
padding-right: 300px;
display: flex;
flex-wrap: wrap;
}
.child {
width: 200px;
height: 100px;
border: 2px solid green;
padding-right: 100px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3>Using the padding-right CSS property to add padding at right in the HTML element.</h3>
<div class="parent">
<div class="child">This is a child div.</div>
<div class="child">This is a child div.</div>
<div class="child">This is a child div.</div>
</div>
</body>
</html>
A red bordered container with 300px right padding containing three green bordered child divs, each with 100px right padding, creating visible spacing between content and right borders.
Example 2: Card Component with Right Padding
In the example below, we have created a card component and added an image inside that. Also, we have specified the right padding of 50px for the card div
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 520px;
height: 150px;
background-color: #f0f0f0;
border: 2px solid #ccc;
padding-right: 50px;
display: flex;
align-items: center;
}
.card img {
max-height: 100%;
}
</style>
</head>
<body>
<h3>Using the padding-right CSS property to add padding at right in the HTML element.</h3>
<div class="card">
<img src="/images/logo.png" alt="Logo">
</div>
</body>
</html>
A gray card container with a logo image and 50px padding on the right side, creating space between the image and the right border.
Using the Padding CSS Property
The padding property is used to set the padding for all four sides of an element. We can set the right padding with some value and 0 for the other sides. The values follow the order: top, right, bottom, left.
Syntax
selector {
padding: 0 right-value 0 0;
}
Example 3: Using Padding Shorthand
In the example below, we have added a card div with some text inside the container div. Also, we have given the padding of 5rem at the right for the container div element
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 10rem;
height: 10rem;
background-color: #f08a8a;
border: 2px solid #333;
padding: 0 5rem 0 0;
}
.card h3 {
margin: 0;
padding: 1rem;
font-size: 14px;
}
</style>
</head>
<body>
<h3>Using the padding CSS property to add padding at right in the HTML element.</h3>
<div class="container">
<div class="card">
<h3>This is a card inside the container div. The right padding is 5rem.</h3>
</div>
</div>
</body>
</html>
A pink container with a dark border showing 5rem space between the content and the right border, demonstrating right padding using the shorthand padding property.
Conclusion
You can specify right padding for an HTML element using either the padding-right property or the shorthand padding property. The padding-right is more direct, while the padding shorthand requires setting other values to 0.
321 Views
