padding-bottom - HTML CSS CSS Property

HTML CSS examples for CSS Property:padding-bottom

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. padding-bottom

Description

The padding-bottom CSS property sets the padding to the bottom side.

Padding is the amount of space between the bottom border and the content of an element.

The following table summarizes the padding-bottom Property.

Item Value
Default value: 0
Applies to:All elements except <tbody>, <thead>, <tfoot>, <tr>, <colgroup> and <col>. It also applies to ::first-letter.
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 

padding-bottom:      length | percentage | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the padding as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage Set the padding in percentage which is calculated with respect to the width of the element's containing block. Negative percentage values are not allowed.
initialSets this property to its default value.
inherittake the value of its parent element padding-bottom property.

The example below shows the padding-bottom property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS padding-bottom property</title>
  <style type="text/css">
    h1 {<!--  w ww . j  av  a  2  s  .  c  o m-->
      padding-bottom: 2em;
      background: #ffb6c1;
    }
    p {
      padding-bottom: 50px;
      background: #f0e68c;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials