In CSS padding properties are used to create space around an html element, most of the time padding is used for
<div>, <p>, <span>, but it can go with any other element.
Padding - Each Side
CSS has properties for creating padding space for each side of any element
- padding-left
- padding-right
- padding-bottom
- padding-top
Any Padding property can have the following values:
- % - indicate padding in % of the width of container
- length - specifies a fix padding in px, pt, cm, etc.
Padding Example
<div style="padding:10px;">
</div>
// Or you can write a style with different padding on each side
<style>
.pc
{
padding-left:10px;
padding-right:15px;
padding-top:8px;
padding-top:6px;
}
</style>
// Padding in percentage
<div style="padding:10%;">
</div>
Another way to write it
div {
padding: 15px 40px 100px 10px;
}
above indicate
top padding is 15px
right padding is 40px
bottom padding is 100px
left padding is 10px