Hello Devs,
In this tutorial, we will learn CSS Padding
Padding is used to create space around an element's content, inside of any defined borders.
There are properties for setting the padding for each side of an element (top, right, bottom, and left).
There are four padding.
- padding-left
- padding-right
- padding-top
- padding-bottom
CSS Margin Values
Padding Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: green;
}
p.ex {
padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 150px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified padding. </p>
<p class="ex">This paragraph is displayed with specified padding.</p>
</body>
</html>
Padding - Shorthand Property
To minimize the code, it is possible in CSS to specify all the padding properties in one property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
padding: 50px 100px 50px 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified padding. </p>
<p class="ex">This paragraph is displayed with specified padding.</p>
</body>
</html>
If the padding has 2 values:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
padding: 50px 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified padding. </p>
<p class="ex">This paragraph is displayed with specified padding.</p>
</body>
</html>
If padding has 1 value:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: Lightgreen;
}
p.ex {
padding: 50px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified padding. </p>
<p class="ex">This paragraph is displayed with specified padding.</p>
</body>
</html>
May this example help you.