Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
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.
Syntax
Users can follow the syntax below to specify the right padding of an element.
padding-right: 100px;
Example 1
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.
In the output, users can observe that space of 300px between the right border and child divs. Also, there is a space of 100px is available between the right border and text content.
<html>
<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;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the 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>
Example 2
In the example below, we have created the card component and added the image inside that. Also, we have specified the right padding of 10px for the card div. In the output, users can observe the space of 10px at right.
<html>
<style>
.card {
width: 520px;
height: 100px;
background-color: grey;
padding-right: 10px;
}
</style>
<body>
<h3>Using the <i> padding-right CSS property </i> to add the padding at right in the HTML element.</h3>
<div class = "card">
<img src = "https://www.tutorialspoint.com/images/logo.png" alt = "">
</div>
</body>
</html>
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 first value represents the top, the second represents the right, the third represents the bottom, and the fourth represents the left. So, we will keep 0 as a value except for the second value.
Syntax
Users can follow the syntax below to use the padding CSS property to specify the right padding of an element.
padding: 0 value 0 0;
Example 3
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. Users can observe the 5rem space between the right border of the container div and its content.
<html>
<style>
.container {
width: 10rem;
height: 10rem;
background-color: #f08a8a;
padding: 0 5rem 0 0;
}
</style>
<body>
<h3>Using the <i> padding CSS property </i> to add the 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 2rem.</h3>
</div>
</div>
</body>
</html>
Users learned to specify the right padding for an HTML element, and they can either use the ‘padding-right’ or ‘padding’ CSS property. If we use the padding property, we need to specify only the second values and keep other values to 0.
120 Views
