The area sorounding every element in an HTML document can be defined as a rectangular box which has a content area surrounded by padding, a border and margins.

The padding properties specify the width of the padding area of a box. The 'padding' shorthand property sets the padding for all four sides while the other padding properties only set their respective side.

Notice how the 55 pixels padding pushes the content inside the DIV inwards

The code:

<div style="padding:55px">
<p>This text is set inside a DIV with a padding of 55pixels
</div>

Note that margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side.

You may use padding-top, padding-right, padding-bottom, and/or padding-left to selectively control any of the margins.

Padding can be applied to all elements.