How To Set Padding Properties

By / October 14, 2021
Hey, there we bring another awesome tutorial, we will be discussing on paddings. You watch the full clip here; YouTube Link. In this tutorial as we have been discussing in previous tutorials we will discuss the properties to the right, left, top and bottom paddings. What you need to understand is that padding specifies the space between the border and the content of an element. The values are given in length, percentage or even inherit. We will have relevant examples below for each padding;

1. Padding-right

-It sets the right padding of an element. We may have an example here; 
<body>
<p style="padding-right: 20px; border: 2px solid blue;">
This will have padding sets to the right 20 pixels
</p>
</body>

It will produce this;

This will have padding sets to the right 20 pixels

2. Padding-left

– It will set the padding to the left element, we may have an example here 
<body>
<p style="padding-left: 20px; border: 2px solid blue;">
This will have padding sets to the left 20 pixels
</p>
</body>

It will produce this;

This will have padding sets to the left 20 pixels

3. Padding-top

-It will sets the padding at the top of the element. Let’s have an example here for better understanding; 
<body>
<p style="padding-top: 20px; border: 2px solid blue;">
This will have padding sets at the top 20 pixels
</p>
</body>

It will produce this;

This will have padding sets at the top 20 pixels

4. Padding-bottom

-It will set the padding at the bottom of the element. We may have an example here; 
<body>
<p style="padding-bottom: 20px; border: 2px solid blue;">
This will have padding sets at the bottom 20 pixels
</p>
</body>

It will produce this;

This will have padding sets at the bottom 20 pixels

5. Padding

-It serves as the shorthand to set the padding at different positions either left, right, top, bottom or even all four paddings. Let’s have an example here 
case 1.
<body>
<p style="padding: 20px; border: 2px solid blue;">
This text will have a padding sets to 20 pixels in the four paddings, that is left, right, bottom and top.
</p>
</body>

case 2.
<body>
<p style="padding: 20px 5% 20px; border: 2px solid blue;">
This text will have padding sets at 20 pixels in the top, then right and left will have 5% padding and bottom will have 20 pixels padding
</p>
</body>

It will produce this;

case 1.

This text will have a padding sets to 20 pixels in the four paddings, that is left, right, bottom and top.

case 2.

This text will have padding sets at 20 pixels in the top, then right and left will have 5% padding and bottom will have 20 pixels padding

Thanks for reading through our tutorial, remember to leave your opinions in the comment section below. For the live sessions and other presentations remember to subscribe to our youtube channel here; YOUTUBE LINK. As we continue learning CSS hoping to meet you in our next tutorial.