We learned how to work with borders and apply them to the various elements in our last tutorial. In this article we will go over setting margins and working with padding to give your web pages a seamless look. There is, as always, a lot of ground to cover, so let's get started.
CSS: Margins and Padding - Using Padding in CSS (Page 3 of 5 )
Padding is used to define the space between an element's border and the content within the element. As with margins and borders, padding consists of top, right, bottom, and left properties. You can also define all properties at once, as shown below:
<html>
<head>
<style type="text/css">
td.equal {padding: 1.0cm}
td.example {padding: 2.5cm 1.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="equal">
Look at this majestic cell. You may have noticed that it has the same padding on all sides!
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="example">
This little cell has a top padding of 2.5 and a right padding of 1.5
</td>
</tr>
</table>
</body>
</html>
As stated above, you can set the individual (top, right, bottom and left) portions of cell-padding as well.
Setting the Top Cell-Padding with CM and Percentage
<html>
<head>
<style type="text/css">
td {padding-top: 2cm}
td.example {padding-top: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
There once was a programmer from New York, whose fingers were covered in pork. He drove a thousand miles to Macon. And by the times he reached there he smelled like bacon.
</td>
</tr>
<tr>
<td class="example">
Yeah I know that wasn't a very good...what are those things called again?
</td>
</tr>
</table>
</body>
</html>
Setting the Bottom Cell-Padding with CM and Percentage
<html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
td.example {padding-bottom: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
There once was a programmer from New York, whose fingers were covered in pork. He drove a thousand miles to Macon. And by the time he reached there he smelled like bacon.
</td>
</tr>
<tr>
<td class="example">
Yeah I know that wasn't a very good...what are those things called again?
</td>
</tr>
</table>
</body>
</html>
Setting the Right Cell-Padding with CM and Percentage
<html>
<head>
<style type="text/css">
td {padding-right: 2cm}
td.example {padding-right: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
There once was a programmer from New York, whose fingers were covered in pork. He drove a thousand miles to Macon. And by the time he reached there he smelled like bacon.
</td>
</tr>
<tr>
<td class="example">
Yeah I know that wasn't a very good...what are those things called again?
</td>
</tr>
</table>
</body>
</html>
Setting the Left Cell-Padding with CM and Percentage
<html>
<head>
<style type="text/css">
td {padding-left: 2cm}
td.example {padding-left: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
There once was a programmer from New York, whose fingers were covered in pork. He drove a thousand miles to Macon. And by the time he reached there he smelled like bacon.
</td>
</tr>
<tr>
<td class="example">
Yeah I know that wasn't a very good...what are those things called again?
Style Sheets 
/ 9 
HTML5 Boilerplate Introduction
