CSS Padding

Padding, is the property that sets the amount of space around content within a div, or between element border and element content.

Note: The html and css code used in these examples are highlighted in red

In the following example we see a picture surrounded by a border.
Padding is set to 5px to illustrate the effect.

<div id="picex"></div>

#picex {
width:200px;
height:127px;
border:1px solid #000;
margin-left:30px;
padding:5px; }

Padding can be set on each side individually
As so, the example below is padding-top set to 5px.

<div id="picex1"></div>

#picex1 {
width:200px;
height:127px;
border:1px solid #000;
margin-left:30px;
padding-top:20px; }

As well as defining the padding one side at a time you can style all the sides into one declaration.
padding-top
padding-right
padding-bottom
padding-left

<div id="picex2"></div>

#picex2 {
width:200px;
height:127px;
border:1px solid #000;
margin-left:30px;
padding: 0 25px 10px 3px; }

The above example padding is set to
top 0px
right 25px
bottom 10px
left 3px