allows you to add space between the content of an element and its border.
It creates an empty area around the content within the element.
we can declare the value of Padding in may ways. Negative values are also accepted

• px (pixels)
• pt (points)
• em (ems)
• % (percentage)
• vh (viewport height)
• rem (root em)
• ch (character width)
• xh (x-height)

These formats are applicable to many styles.
Here are the margin properties defines thier respective side

• padding-top (gives padding at the top)
• padding-left (gives padding at the left)
• padding-right (gives padding at the right)
• padding-bottom (gives padding at the bottom)

.p {
    padding: 12px;
}
.pt {
    padding-top: 12px;
}
.pl {
    padding-left: 12px;
}
.pr {
    padding-right: 12px;
}
.pb {
    padding-botom: 12px;
}

We can set the Padding differently for all sides using Padding property itself. It is similar to margin property.
If you define only single value in the Padding then it apples all the sides.

• Padding: 12px

Similarly If you define only two values in the Padding then it apply to Top and Right sides.

• Ex: Padding: 12px 10px;

Similarly if you define three values in the Padding then it apply to Top, Right and Bottom sides.

• Ex: Padding: 12px 10px 16px;

Similarly if you define four values in the Padding then it apply to Top, Right, Bottom, Left.

• Ex: Padding: 12px 10px 16px 8px;

.p1 {
    padding: 10px;
}
.p2 {
    padding: 15px 10px;
}
.p3 {
    padding: 20px 15px 10px;
}
.p4 {
    padding: 25px 20px 15px 10px;
}

While using padding along with width. It adds the padding value to the width of left and right sides.
Ex: width:100px;
padding: 20px;
total width would br 140
Because it adds 20px to the left and right sides.

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  background-color: lightgray;
}

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now