Padding

The padding property creates space around element content.

Padding values are set using lengths or percentages. It cannot accept negative values. Its default value for all padding properties is 0.

We must set the properties with this order: 1- padding-top , 2- padding-right , 3- padding-bottom , 4- padding-left.

padding : length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <style>
           .padding { padding: 100px 50px 40px 70px;}
      </style>
   </head>
   <body>

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

   </body>
</html>

Property Values

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