Padding Properties in Style Sheet

Topic

Handling Padding properties in Html.

Explanation

Property: Padding

All the padding (top, right, bottom, left) can be combined using this single tag. Usage:
padding: 20px;
padding: 10px 20px 30px 10px;
padding: 10px 20px;
padding: 20px 10px 30px;

Definition:

The padding can be set using the tag "padding".
It takes the following values.

a) 20px : This will set a padding of 20px on the four sides (top, right, bottom, left).
b) 10px 20px 30px 10px: This format will set the padding in the order of top,right,bottom,left.
c) 10px 20px : This format will set the padding for top and right. Bottom will take the top padding value (10px) and left will take right paddings value(20px).
d) 20px 10px 30px: This format will set the padding for top and right and bottom. left will take the right paddings value.

The values can be in percentage or points or pixels.

Example 1:

<div align=right style="padding: 20px;">
Here we have set a padding of 20 pixels.
You can see that this paragraph has paddings on all the four sides.
</div>

Result:

Here we have set a padding of 20 pixels. You can see that this paragraph has paddings on all the four sides.

Example 2:

<div style="padding: 10px 50px 30px 5px;">
Here we have set a padding with four values.
You can see that this paragraph has padding of 10px on top, 50px on right, 30px on bottom and 5px on left.
</div>

Result:

Here we have set a padding with four values. You can see that this paragraph has padding of 10px on top, 50px on right, 30px on bottom and 5px on left.

Example 3:

<div style="padding: 20px 40px;">
Here we have set a padding with two values.
You can see that this paragraph has paddings on 20px on top and bottom and 40px on left and right.
</div>

Result:

Here we have set a padding with two values. You can see that this paragraph has paddings on 20px on top and bottom and 40px on left and right.

Example 4:

<div style="padding: 10px 50px 40px;">
Here we have set a padding with three values.
You can see that this paragraph has paddings of 10px on top, 50px on right , 40px on bottom. left padding took values from its right counter part as 50px.
</div>

Result:

Here we have set a padding with three values. You can see that this paragraph has paddings of 10px on top, 50px on right , 40px on bottom. left padding took values from its right counter part as 50px.

Padding Properties - CSS