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
Selected Reading
CSS padding-right property
The padding-right property in CSS specifies the amount of space between the content and the right border of an element. It adds internal spacing on the right side without affecting the element's border or margin.
Syntax
padding-right: value;
The value can be specified in:
- Length units: px, em, rem, pt, etc.
- Percentage: % (relative to parent element's width)
- Keywords: inherit, initial, unset
Example: Length Values
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 2px solid blue;
margin: 10px 0;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box" style="padding-right: 20px;">
This paragraph has 20px right padding
</div>
<div class="box" style="padding-right: 50px;">
This paragraph has 50px right padding
</div>
</body>
</html>
Example: Percentage Values
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 2px solid green;
margin: 10px 0;
}
.content {
background-color: #e6f3ff;
border: 1px dashed blue;
}
</style>
</head>
<body>
<div class="container">
<div class="content" style="padding-right: 10%;">
Right padding: 10% of parent width
</div>
</div>
<div class="container">
<div class="content" style="padding-right: 25%;">
Right padding: 25% of parent width
</div>
</div>
</body>
</html>
Comparison with Other Padding Properties
| Property | Effect | Example |
|---|---|---|
padding-right |
Right side only | padding-right: 15px; |
padding-left |
Left side only | padding-left: 15px; |
padding |
All sides | padding: 15px; |
Common Use Cases
The padding-right property is commonly used for:
- Creating space between text content and right borders
- Aligning content within containers
- Building responsive layouts with percentage-based spacing
- Fine-tuning element spacing in complex layouts
Conclusion
The padding-right property provides precise control over right-side internal spacing. Use length units for fixed spacing or percentages for responsive designs that adapt to container width.
Updated on: 2026-03-15T23:18:59+05:30
250 Views
Advertisements