Div Padding - CSS

 

 

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.