Just as the name suggests, padding is just extra space around the contents of an element but the important point to note is that it is inside the border. You may change the padding thickness but not its colour or texture.
To add padding to an element
Type padding: x
Here, x is the amount of space which you wish to add and this can be expressed in units (5px) or as a percentage of the width of the parent element (20%). The space after the colon is optional but there must never be a space between the number and the unit.
In the same way as with the margin property, if you only use one value then the padding will be equally applied to all four sides but if you use two values, the first will apply to the top and bottom of the second value to the right and left. If you use three values, the first will apply to the top, the second to the right and left, and the third to the bottom. Finally if you use four values then in a clockwise manner the values will be applied to the top, right, bottom and left. If you like you can use percentages or ems to create a liquid layout that will expand or contract depending on the monitor size of the person viewing the webpage.