Padding-top

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

We can't give negative values.

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

CSS Syntax

padding-top: length | initial | inherit;

Let's see an example:

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

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

   </body>
</html>

Property Values

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