Padding adds a portion of space around the inside of an element. This means that any content that the padded element contains will position itself in such a way so as to leave that space. The amount of padding inside an element can be measured with pixels or by percentage.

Without Padding
	<div style="width:100px; height:100px; background-color:#555555"> <img src="sunflower.jpg"> </div>

With Padding
	<div style="width:100px; height:100px; padding:20px; background-color:#555555"> <img src="sunflower.jpg"> </div>

Typically, padding is set to an equal amount on all sides. However, that’s not to say there won't be times where you only want one to three of the sides to observe your padding rule. In these situations, we add a hyphen and the desired side to the name of the property.

padding-top:20px	padding-bottom:20px
padding-left:20px	padding-right:20px

One aspect of padding that designers often don’t know about or don’t take note of is that padding counts toward an element’s dimensions. If you have a div that is set to 300px wide and 300px tall, adding any padding will change how large the div is displayed. For example, adding a padding of 10px will result in a div with the dimensions 320px by 320px (10px of padding on the left and right add a total of 20px to the width, and 10px of padding on the top and bottom add a total of 20px to the height).

In designs where the size of an element plays into your layout in an exact way, you need to keep an eye out for these quirks in measurements. If a div must be 300px by 300px to fit into your design, but you need to add a padding of 20px, do a little subtraction from each side of your dimensions. 20px of padding all the way around a div adds 40px to both the width and height, so you would subtract 40px from each dimension. A div with a width of 260px and a height of 260px, plus 20px of padding will display at 300px by 300px.