Skip to content
Related Articles

Related Articles

How to set padding around an element using CSS ?
  • Last Updated : 16 Apr, 2021

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:

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 padding property:

Example 2:

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 padding property:

My Personal Notes arrow_drop_up
Recommended Articles
Page :