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 tutorial 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>
<div style="border:solid 2px #000; width:60%; padding-left:20px;">
This container has a left padding of 20px
</div>
</body>
</html>
Output:
This container has a left padding of 20px
Setting the right padding of an element
The right padding of an element is set using the padding-right property.
The text in the two containers in the example is purposely aligned to the right to illustrate the concept of setting the right padding of an element.
Example:
<html>
<head>
<title>Setting the right padding of an element</title>
</head>
<body>
<div style="border:solid 2px #000; width:60%; text-align:right;">
This container has default padding
</div>
<div style="border:solid 2px #000; width:60%; text-align:right; padding-right:35px;">
This container has a right padding of 35px
</div>
</body>
</html>
Output:
This container has default padding
This container has a right padding of 35px
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>
<div style="border:solid 2px #000; width:60%; padding-top:30px;">
This container has a top padding of 30px
</div>
</body>
</html>
Output:
This container has a top padding of 30px
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>
<div style="border:solid 2px #000; width:60%; padding-bottom:35px;">
This container has a bottom padding of 35px
</div>
</body>
</html>
Output:
This container has a bottom padding of 35px