CSS Padding

Padding is the space between the HTML content and the border. It gives internal spacing and helps to enhance the website.

Here, the space between the content "CodeWithRahul" and the border is the padding.

Syntex

<style>
    selector {
        padding: value;
    }
</style>

Padding value can be used in any of the following methods:

Method 1

<style>
    selector {
        padding: value;
    }
</style>

Here, the padding value will apply equal padding to all sides (top, right, left, and bottom).

Example:

<html lang="en">
<head>
    <style>
        #p1{
            border:2px solid #23Dafa;
        }
        #p2{
            padding:12px;
            border:2px solid #f23;
        }
    </style>
</head>
<body>
    <p id="p1">CodeWithRahul (Without Padding)</p>
    <p id="p2">Code With Rahul (With Padding)</p>
</body>
</style>

Output

Note:-Values can be specified in different units, such as pixels (px), em, rem, percentage (%), auto, etc. If you are not familiar with borders, you can also check out the CSS borders tutorial.

Method 2

<style>
    selector {
        padding: value value;
    }
</style>

Here, value 1 is the veritcal padding(y-axis) and value 2 is the horizontal padding (x-axis).

Example:

<html lang="en">
<head>
    <style>
        #p1{
            border:2px solid #23Dafa;
        }
        #p2{
            padding:20px 50px;
            border:2px solid #f23
        }
    </style>
</head>
<body>
    <p id="p1">CodeWithRahul (Without Padding)</p>
    <p id="p2">Code With Rahul (With Padding)</p>
</body>
</style>

Output

Padding value can be used in any of the following methods:

Method 3

<style>
    selector {
        padding: value1 value2 value3 value4;
    }
</style>

In this method, each value represents the padding of individual sides (top, right, bottom, left).

top: value1
right: value2
bottom: value3
left: value4

Example:

<html lang="en">
<head>
    <style>
        #p1{
            border:2px solid #23Dafa;
        }
        #p2{
            padding:15px 30px 25px 50px;
            border:2px solid #f23
        }
    </style>
</head>
<body>
    <p id="p1">CodeWithRahul (Without Padding)</p>
    <p id="p2">Code With Rahul (With Padding)</p>
</body>
</style>

Output

In this example, the padding on individual sides is

top: 10px
right: 20px
bottom: 25px
left: 50px

Playaround:

1. You can also check the padding of each HTML element(s) using the inspect tool. Follow the steps.
2. Right-click and click on inspect.
3. Click on the computed styles sidebar.
4. Toggle with the box model.
or follow the video.