CSS Paddings Properties
If you want to display space around HTML elements or text, then you can use padding properties. Note that, the padding properties always work inside the any borders or HTML tags.
You can define the paddings for the each sides of an element such as the top, bottom, right, and left sides using the CSS padding properties like:
- padding-top
- padding-bottom
- padding-right
- padding-left
Here are given below the values of the each padding properties:
- % – we define a padding in % of the width of the containing element
- length – we define padding value in px, pt, cm, etc.
- inherit – specifies that the padding always inherited from the parent element
Let’s see the given example to understand how padding properties works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
padding-top: 115px;
padding-bottom: 150px;
padding-right: 120px;
padding-left: 90px;
}
</style>
</head>
<body>
<p class="bor-test">Here we use padding properties padding-top,padding-bottom,padding-left and padding-right in this paragraph.</p>
</body>
</html>
Output
Here we use padding properties padding-top,padding-bottom,padding-left and padding-right in this paragraph.
Note: You can define negative values in paddinge properties.
padding – Shorthand Property
In padding shorthand property, you can combine all the padding properties in single property or single rule.
You can see here how it works:
If the CSS padding property has 4 values:
padding: 23px 45px 85px 110px;
- top padding is 23px
- right padding is 45px
- bottom padding is 88px
- left padding is 117px
Let’s see the given example to understand how padding shorthand property works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
padding: 23px 45px 87px 117px;
}
</style>
</head>
<body>
<p class="bor-test">Here we use padding shorthand property in this paragraph.</p>
</body>
</html>
Output
Here we use padding shorthand property in this paragraph.