How to set padding around an element using CSS ?

Last Updated : 24 May, 2023

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>