CSS Tutorial || CSS Padding
CSS Padding
The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties
1.padding-left
It is used to set left padding of an element.
2.padding-right
It is used to set right padding of an element.
3.padding-top
It is used to set-top padding of an element.
4.padding-bottom
It is used to set bottom padding of an element.
The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.
| length | It is used to define fixed padding in pt, px, em etc. |
| % | It defines padding in % of containing element. |
CSS Padding Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: yellow;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
background-color: blue;
}
</style>
</head>
<body>
<h1>CSS Padding property.</h1>
<p class="padding">The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties
.</p>
</body>
</html> Output:
CSS Padding property.
The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties .
