Open In App

How to set padding around an element using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 24 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads