The padding is the closest property to an HTML element in the box model. The padding gives some space around the HTML element, just like margin which given space around element from outside. There are 4 padding to an HTML element.

The syntax to specify padding is as follows.

p{
}

The above code is very difficult because you need to specify all sides one at a time. A much simple version of padding is allowed in CSS.

p{
}

The above will set the padding for all four side and it is same as below.

padding-top: 10px;
padding-left: 40px;

There is other ways to set the padding. For example, we could use only two values.

p{
}

The above code use only two values and it is same as below.

padding-top: 10px;
padding-left: 30px;

You could also set a single value for all four sides.

padding: 10px;

You can understand the effect of padding with an example. Create an HTML page called example-padding.html and insert the following code.

<!DOCTYPE html>
<html>
<style>
.box1{
width:50%;
border: 2px solid darkred;
}
.box2{
width:50%;
border: 2px solid darkred;
}
</style>
<body>
<p class="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="box2">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

The padding more to the overall length of the border. Suppose the left border length of an HTML element is 200 px and padding is about 50px. The final border length is 250px. As shown in the output.To contain the padding within the border use following CSS command.

p{
width: 200px;
}