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

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


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.

Related articles