CSS padding
Understanding DimensionsIn this lesson, we will learn how to implement padding on HTML elements using CSS padding properties.
CSS padding Property
The CSS padding property is used to apply an extra spacing between the border and the content of an element.
Padding clears an area around the content of an element (inside the border). It's a shorthand property for setting padding on all 4 sides. For example:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS padding Example</title>
<!-- Internal CSS -->
<style>
div {
width: 300px;
border: 1px solid red;
padding: 25px 50px 40px 60px;
}
</style>
</head>
<body>
<div>
<p>Set padding to all the four sides</p>
</div>
</body>
</html>In the above example, the first value in the padding property is for top padding, the second value is for right padding, the third value is for bottom padding and the fourth value is for left padding.
The padding property can be set in any one of the four ways given below. For example:
- padding: 30px 20px 50px 70px;
- top padding is 30px
- right padding is 20px
- bottom padding is 50px
- left padding is 70px
- padding: 30px 20px 50px;
- top padding is 30px
- right padding is 20px
- bottom padding is 50px
- here left padding values is not given so the left padding value will be same as right padding value which is 20px
- padding: 30px 20px;
- top padding is 30px
- right padding is 20px
- here bottom padding values is not given so the bottom padding value will be same as top padding value which is 30px
- here left padding values is not given so the left padding value will be same as right padding value which is 20px
- padding: 30px;
- all four paddings are 30px
Padding for Individual Sides
In CSS, it is possible to specify different paddings for different sides.
- padding-top: It is used to set the top padding of an element.
- padding-bottom: It is used to set the bottom padding of an element.
- padding-left: It is used to set the left padding of an element.
- padding-right: It is used to set the right padding of an element.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS individual sides padding Example</title>
<!-- Internal CSS -->
<style>
div {
width: 300px;
border: 1px solid red;
padding-top: 40px;
padding-bottom: 30px;
padding-left: 80px;
padding-right: 50px;
}
</style>
</head>
<body>
<div>
<p>Set padding to individual sides</p>
</div>
</body>
</html>