In this article, we will learn How to set the padding around an element using CSS.
Approach: The padding is the space between the content of the element and its boundaries. We can set the padding around an element using the padding property of the CSS. It takes four values top_padding, right_padding, bottom_padding, and, left_padding.
Syntax:
padding: top_padding right_padding bottom_padding left_padding;
We can also use these values individually as property that takes one value at a time.
Syntax:
padding-top: value; padding-right: value; padding-left: value; padding-bottom: value;
Example 1: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html><html lang="en">
<head>
<style>
.gfg1{
width: 50%;
font-size: 30px;
border: solid 2px red;
padding: 20px 20px 30px 30px;
}
</style>
</head>
<body>
<div class="gfg1">GeeksforGeeks</div>
</body>
</html>
|
Output:
- Before Applying padding property:
- After Applying the padding property:
Example 2: Here is another example of using the padding property CSS
HTML
<!DOCTYPE html><html lang="en">
<head>
<style>
.gfg1{
width: 50%;
font-size: 30px;
border: solid 2px red;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="gfg1">GeeksforGeeks</div>
</body>
</html>
|
Output:
- Before Applying padding property:
- After Applying the padding property: