Padding Property Having Four Values
If the padding property contains four values, then the first value sets the top padding, the second value sets the right padding, the third value sets the bottom padding, and the fourth value sets the left padding.:
For Example – padding: 10px 20px 15px 25px;
- top padding is 10px
- right padding is 5px
- bottom padding is 15px
- left padding is 20px
Syntax:
.element {
/* Applies 10px padding to top,
20px padding to right,
15px padding to bottom,
and 25px padding to left */
padding: 10px 20px 15px 25px;
}
Example: To demonstrate using a padding property with four values.
<!DOCTYPE html>
<html>
<head>
<title>Padding Property Contains Four Values</title>
<style>
body {
margin: 0;
padding: 20px;
}
h2 {
color: green;
}
.myDiv {
background-color: cyan;
border: 2px solid black;
text-align: center;
width: 40%;
padding: 10px 20px 15px 25px;
/* Applies 10px padding to top,
20px padding to right,
15px padding to bottom,
and 25px padding to left */
}
.inner {
height: 70px;
width: 70px;
background-color: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="myDiv">
<div class="inner">Box</div>
</div>
</body>
</html>
Output:
CSS padding
CSS Padding
Padding is the space between the content and the defined border of an element. Padding means adding spaces inside the element, controlling its internal space, thus affecting its dimensions and appearance.
Table of Content
- CSS Padding
- Shorthand Property for Padding in CSS
- All CSS Padding Properties