CSS padding properties
With CSS padding properties, you can specify how much space there should be between the content of an element and its borders.
This lesson focuses on:
- Setting the left padding of an element
- Setting the right padding of an element
- Setting the top padding of an element
- Setting the bottom padding of an element
Setting the left padding of an element
The left padding of an element is set using the padding-left property.
Example:
<html>
<head>
<title>Setting the left padding of an element</title>
</head>
<body>
<table border="2">
<tr>
<td>
This table cell has no specified padding
</td>
<td style="padding-left: 5cm;">
This table cell has a left padding of 5 centimeters
</td>
</tr>
</table>
</body>
</html>
Output:
| This table cell has no specified padding | This table cell has a left padding of 5 centimeters |
In the above example, there is a table with two cells. The first cell has no specified padding. The second cell has a left padding of 5 centimeters.
Setting the right padding of an element
The right padding of an element is set using the padding-right property.
Example:
<html>
<head>
<title>Setting the right padding of an element</title>
</head>
<body>
<table border="2">
<tr>
<td>
This table cell has no specified padding
</td>
<td style="padding-right: 5cm;">
This table cell has a right padding of 5 centimeters
</td>
</tr>
</table>
</body>
</html>
Output:
| This table cell has no specified padding | This table cell has a right padding of 5 centimeters |
In the above example, there is a table with two cells. The first cell has no specified padding. The second cell has a right padding of 5 centimeters.
Setting the top padding of an element
The top padding of an element is set using the padding-top property.
Example:
<html>
<head>
<title>Setting the top padding of an element</title>
</head>
<body>
<table border="2">
<tr>
<td>
This table cell has no specified padding
</td>
<td style="padding-top: 2in;">
This table cell has a top padding of 2 inches
</td>
</tr>
</table>
</body>
</html>
Output:
| This table cell has no specified padding | This table cell has a top padding of 2 inches |
In the above example, there is a table with two cells. The first cell has no specified padding. The second cell has a top padding of 2 inches
Setting the bottom padding of an element
The bottom padding of an element is set using the padding-bottom property.
Example:
<html>
<head>
<title>Setting the bottom padding of an element</title>
</head>
<body>
<table border="2">
<tr>
<td>
This table cell has no specified padding
</td>
<td style="padding-bottom: 2in;">
This table cell has a bottom padding of 2 inches
</td>
</tr>
</table>
</body>
</html>
Output:
| This table cell has no specified padding | This table cell has a bottom padding of 2 inches |
In the above example, there is a table with two cells. The first cell has no specified padding. The second cell has a bottom padding of 2 inches.
