Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS Padding Tutorial

Padding is the space that appears between an element's border and the content of the element. CSS padding properties allow you to define that space.


Setting the Left Padding of a Paragraph

The following CSS code example shows how to set the left padding of a paragraph.

<html>
<head>
<style type="text/css">
p {padding-left: 1cm}
</style>
</head>
<body>
<p>
This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm.
</p>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting the Right Padding of a Paragraph

The following CSS code example shows how to set the right padding of a paragraph.

<html>
<head>
<style type="text/css">
p {padding-right: 10cm}
</style>
</head>
<body>
<p>
This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10.
</p>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting the Top Padding of a Paragraph

The following CSS code example shows how to set the top padding of a paragraph.

<html>
<head>
<style type="text/css">
p {padding-top: 1cm}
</style>
</head>
<body>
<p>
This is a paragraph with a top padding of 1cm.
</p>
<p>
This is another paragraph with a top padding of 1cm.
</p>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting the Bottom Padding of a Paragraph

The following CSS code example shows how to set the bottom padding of a paragraph.

<html>
<head>
<style type="text/css">
p {padding-bottom: 1cm}
</style>
</head>
<body>
<p>
This is a paragraph with a bottom padding of 1cm.
</p>
<p>
This is another paragraph with a bottom padding of 1cm.
</p>
<p>
And this is another paragraph with a bottom padding of 1cm.
</p>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting the Left Padding of a Tablecell

The following CSS code example shows how to set the left padding of a tablecell.

<html>
<head>
<style type="text/css">
td {padding-left: 5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a left padding of 5cm.
</td>
</tr>
</table>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting the Right Padding of a Tablecell

The following CSS code example shows how to set the right padding of a tablecell.

<html>
<head>
<style type="text/css">
td {padding-right: 5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm.
</td>
</tr>
</table>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting the Top Padding of a Tablecell

The following CSS code example shows how to set the top padding of a tablecell.

<html>
<head>
<style type="text/css">
td {padding-top: 5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a top padding of 5cm. This is a tablecell with a top padding of 5cm.
</td>
</tr>
</table>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting the Bottom Padding of a Tablecell

The following CSS code example shows how to set the bottom padding of a tablecell.

<html>
<head>
<style type="text/css">
td {padding-bottom: 5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a bottom padding of 5cm.
</td>
</tr>
</table>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.


Setting all of the Table Padding Properties in one Declaration

The following CSS code example shows how to set all of the table padding properties in one declaration.

<html>
<head>
<style type="text/css">
td.table1 {padding: 4cm}
td.table2 {padding: 1cm 5cm}

</style>
</head>
<body>
<table border="1">
<tr>
<td class="table1">
This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side.
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="table2">
This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm.
</td>
</tr>
</table>
</body>
</html>

Click on CSS Padding Example to the web page the above code produces.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details