CSS padding-bottom Property

The padding-bottom property of an element sets the padding space on the bottom of an element.

Negative values are invalid.

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.paddingBottom = "5%";

Syntax

padding-bottom: length | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      border: 2px solid #000; 
      color: #1c87c9;
      padding-bottom: 40px;
      }
    </style>
  </head>
  <body>
    <h2>Padding-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Another example where the padding space is set as "2cm".

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      border: 2px solid #000; 
      color: #1c87c9;
      padding-bottom: 2cm;
      }
    </style>
  </head>
  <body>
    <h2>Padding-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Values

Value Description
length It sets the bottom padding in px, pt, cm, etc. Its default value is 0px.
% It sets bottom 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.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+




Related articles