Definition:
The CSS padding property is used to put a space between the elements and inside the defined borders. “Padding” property is the shorthand property of all four individual padding properties. i.e,
padding-top
padding-right
padding-bottom
padding-left
Syntax:
padding: 10px;Padding Property Values
Padding property values can have 1, 2 , 3 and 4 values.
- If you have one padding property value, then the padding applies to all four sides.
Syntax:
.paragraph
{
padding: 10px;
}Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
border: 2px dashed red;
background-color: pink;
text-align:center;
padding: 10px;
}
</style>
</head>
<body>
<div class="paragraph">This element has 10px equal padding in four sides. The padding is added inside the defined border.</div>
</body>
</html>
Output:
2. If you have two padding property values, the first value applies top and bottom paddings, and the second value applies left and right paddings.
Syntax:
.paragraph
{
padding: 10px 20px;
}
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
border: 2px dashed red;
background-color: pink;
text-align:center;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="paragraph">Top and Bottom paddings are 10px <br/> Left and Right paddings are 20px.</div>
</body>
</html>
Output:
3. If you have three padding property values, the first value applies top padding, the second value applies left and right paddings and the third value applies to bottom padding.
Syntax:
.paragraph
{
padding: 10px 20px 5px;
}
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
border: 2px dashed red;
background-color: pink;
text-align:center;
padding: 10px 20px 5px;
}
</style>
</head>
<body>
<div class="paragraph">Top Margin is 10px; <br/> Left and Right margins are 20px;<br/> Bottom margin is 5px;</div>
</body>
</html>
Output:
4. If you have four padding property values, then the first value applies to top padding, the second value applies to right padding, the third value applies to bottom padding and the fourth value applies to left padding.
Syntax:
.paragraph
{
padding: 10px 20px 15px 10px;
}
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph{
border: 2px dashed red;
background-color: pink;
text-align:center;
padding: 10px 20px 15px 10px;
}
</style>
</head>
<body>
<div class="paragraph">Top Margin is 10px; <br/> Right margin is 20px;<br/> Bottom margin is 15px; <br/> Left margin is 10px;</div>
</body>
</html>
Output:
You may be interested in the following topics:
- CSS Padding-left
- CSS Padding-bottom
- CSS Padding-right
- CSS Padding-top
- CSS Padding
- CSS Padding (All Properties)