The padding-right CSS property sets the padding space on the right side of an element.
Negative values are not valid.
This property doesn't have any effect on inline elements, like <span>.
Initial Value | 0 |
Applies to | All elements. An exception is made when the display property is set to table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter. |
Inherited | No. |
Animatable | Yes. Padding space is animatable. |
Version | CSS1 |
DOM Syntax | object.style.paddingRight = "40px"; |
With the help of the padding property you can set paddings on all the sides of an element with a single announcement.
Syntax
padding-right: length | initial | inherit;
Example of the padding-right property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100px;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</body>
</html>
Result
![CSS padding-right Property](/uploads/media/default/0001/03/c56cf07b0b6e1dc63a2a92b9f1ff599abcf304bf.png)
Example of the padding-right property with the "length" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100pt;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>
Example of the padding-right property specified in percentage:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 15px;
padding-right: 10%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>
Values
Value | Description | Play it |
---|---|---|
length | It sets the right padding in px, pt, cm, etc. Its default value is 0px. | Play it » |
% | It sets right padding in percent of the width of the containing element. | Play it » |
initial | Makes the property use its default value. | Play it » |
inherit | Inherits the property from its parents element. |
Browser support
|
|
|
|
---|---|---|---|
1.0+ | 1.0+ | 1.0+ | 3.5+ |
Practice Your Knowledge
What is the function of the padding-right property in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.