Shorthand Property for Padding in CSS
The Shorthand Padding Property in CSS allows you to set the padding on all sides (top, right, bottom, left) of an element in a single line with some combinations, so we can easily apply padding to our targeted element.
There are four cases while using shorthand property:
- If the padding property has one value.
- If the padding property contains two values.
- If the padding property contains three values.
- If the padding property contains four values.
CSS Shorthand Padding Property for One Value
If the padding property has one value, then it applies padding to all sides of an element. For example padding: 20px applies 20 pixels of padding to all sides equally.
Syntax:
.element {
/* Applies 20px padding to all sides */
padding: 20px;
}
Example: To demonstrate applying 20px padding to all sides of div.
<!DOCTYPE html>
<html>
<head>
<title>Padding Property has One Value</title>
<style>
body {
margin: 0;
padding: 20px;
}
h2 {
color: green;
}
.myDiv {
background-color: gray;
border: 2px solid black;
text-align: center;
width: 40%;
/* Applies 10px padding to all sides */
padding: 20px;
}
.inner {
height: 70px;
width: 70px;
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="myDiv">
<div class="inner">Padding</div>
</div>
</body>
</html>
Output:
CSS padding property with one value.
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