W3docs
en
Log in

CSS padding-right Property

How to use CSS padding-right property to define the padding space on the right of an element. See property values and examples.

The padding-right CSS property sets the padding space on the right side of an element.

Info

Negative values are not valid.

Info

This property doesn't have any effect on inline elements, like <span>.

Initial Value0
Applies toAll 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.
InheritedNo.
AnimatableYes. Padding space is animatable.
VersionCSS1
DOM Syntaxobject.style.paddingRight = "40px";
Tip

With the help of the padding property you can set paddings on all the sides of an element with a single announcement.

Syntax

Syntax of CSS padding-right Property

padding-right: length | initial | inherit;

Example of the padding-right property:

Example of CSS padding-right Property with px value

<!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>
Try it Yourself »

Result

CSS padding-right Property

Example of the padding-right property with the "length" value:

Example of CSS padding-right Property with pt 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>
Try it Yourself »

Example of the padding-right property specified in percentage:

Example of CSS padding-right property with % value:

<!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>
Try it Yourself »

Values

ValueDescriptionPlay it
lengthIt 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 »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parents element.

Practice

Practice

What is the function of the padding-right property in CSS?