Padding define the space in outside the container like this:
You can can apply Padding properties to each side of element individually.
- Padding-top - Padding-right - Padding-bottom - Padding-left ExampleYou can sets the Padding on all four sides differently
Example<html>
<head>
<style>
.paragraph {
Padding-top: 50px;
Padding-bottom: 80px;
Padding-right: 100px;
Padding-left: 100px;
}
</style>
</head>
<body>
<p class="paragraph">Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides</p>
</body>
</html>
Above four properties can use in single statement like this:
Syntax div{Padding:top right bottom left; } Example
<style>
.short {
Padding:20px 30px 40px 50px;
border: 2px dashed #a2a2a2;
}
</style>
<div class="short">This element has a shorthand Padding property applied .</div>
Padding:15px 10px; -Top and bottom have a Padding of 15 pixels. -Right and left have a Padding of 10 pixels.
Padding:15px 10px 40px; -Left and right are 10px -Bottom is 30px
This example set the Padding on all four sides
<style>
.allside{
Padding:30px ;
border: 2px dashed blue;
}
</style>
<div class="allside">
This Padding property set 30px on all four sides top,right,bottom and left.
</div>