Padding-bottom

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

We can't give negative values.

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

CSS Syntax

padding-bottom: length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <style>
           .padding-bottom { padding-bottom: 100px;}
      </style>
   </head>
   <body>

        <p> Here we didn't set any padding. </p>
        <p class="padding-bottom">You can see that we defined a 100px padding bottom for this text..</p>
         <p> Here we didn't set any padding. </p>

   </body>
</html>

Property Values

Value Descriptions
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 It makes the property use its default value.
inherit It inherits the property from its parents element.