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>
           .padding-bottom { padding-bottom: 100px;}

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


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.

Related articles