Padding Properties - CSS
Handling Padding properties in Html.
Explanation
Property :
PaddingAll 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.
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.Here we have set a padding of 20 pixels.
</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>
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>
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>
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.
