To specify the space between the content and the border of an element, the CSS Padding is used. The CSS margin is used to specify the space around elements while CSS padding is used to clear an area around the content. The background colors affect CSS padding. Using separate properties, we can modify the top, bottom, left, and right padding independently. The shorthand padding property can be used to modify all properties at once.
CSS Padding Properties:
| Property | Uses |
| padding | Used to define all the padding properties in one declaration. |
| padding-left | Used to define the left padding of an element. |
| padding-right | Used to define the right padding of an element. |
| padding-top | Used to define the top padding of an element. |
| padding-bottom | Used to define the bottom padding of an element. |
CSS Padding Values:
| Value | Uses |
| length | Used to specify the fixed padding in pt, px, em etc. |
| Used to specify the padding in |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid red;
background-color: pink;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>
Explanation:
In the above example, we are defining the separate properties to modify the top, bottom, left and right padding.
