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?
</td>
</tr>
</table>
</body>
</html>
Next: Working with Lists in CSS >>
More Style Sheets Articles
More By James Payne
/ 3 
