| Padding can also be understood as “filling”. It’s like internal spacing. This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. | ||||||||||||||||||||||||||||||||||||
| All the padding (left, 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. | ||||||||||||||||||||||||||||||||||||
| By defining padding for the headlines, you change how much filling there will be around the text in each headline: | ||||||||||||||||||||||||||||||||||||
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE>CSS Padding example</TITLE> <style> h1 { background: pink; padding: 20px 20px 20px 80px; } h2 { background: cyan; padding-left:120px; } </style> </HEAD> <BODY> <h1>CSS Font Size example</h1> <h2> a CSS Padding example </h2> <p>CSS padding example</p> </BODY> </HTML> |
||||||||||||||||||||||||||||||||||||
| Click on example to view the page produced by above code. | ||||||||||||||||||||||||||||||||||||
| Example 1: | ||||||||||||||||||||||||||||||||||||
| <div align=right style=”padding: 22px;”> Here we have set a padding of 22 pixels. You can see that this paragraph has paddings on all the four sides. </div> |
||||||||||||||||||||||||||||||||||||
| 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> |
||||||||||||||||||||||||||||||||||||
| Example 3: | ||||||||||||||||||||||||||||||||||||
| <div style=”padding: 22px 30px;”> Here we have set a padding with two values. You can see that this paragraph has paddings on 22px on top and bottom and 30px on left and right. </div> |
||||||||||||||||||||||||||||||||||||
| 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> |
||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||