CSS padding-right Property

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

Negative values are not valid.

This property has no effect on inline elements, like <span>.

Initial Value 0
Applies to All elements, except 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";

Syntax

padding-right: length | initial | inherit;

Example

<!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>

Another example where the padding space is set as "100pt":

Example

<!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>

Values

Value Description
length It sets the right padding in px, pt, cm, etc. Its default value is 0px.
% It sets right padding in percent of the width of the containing element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles