CSS Padding

The Padding property in CSS is creating space around the element's content inside its borders.

The Padding propery is very similar to the Margin property in terms of its values as it accepts the same. You can have numeric or percentage values (plus negative values) while it can also be specific as listed below:

padding-top: auto | numeric | % | inherit ;
padding-left: auto | numeric | % | inherit ;
padding-right: auto | numeric | % | inherit ;
padding-bottom: auto | numeric | % | inherit ;

The shorthand property:

padding: 15px 30px 45px 70px;

The above shorthand property is explained as per below:

top padding = 15px

right padding = 30px

bottom padding = 45px

left padding = 70px

Some Border examples:

                 
                  
    <style>
 .p1{
  padding: 40px;
  border: 2px solid #C818E8;
}

    </style>

      <div class="p1">Padding of 40px</div>

The output:

Padding of 40px