Padding

The padding property is used to specify the space between the content of an element and its border.
Padding property can be applied to various HTML elements like divs, paragraphs, and headings.

Syntax:

body {
    padding: value;
}

Ways to set padding property:

Setting Padding for All Sides Equally:

selector {
padding: 10px; /* 10 pixels of padding on all sides */
}

Setting Padding for Individual Sides:

selector {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}

Shorthand Syntax for All Sides:

shorthand notation is used to set padding for all sides at once in the order of top, right, bottom, and left:

selector {
padding: 20px 20px 10px 30px; /* top, right, bottom, left */
}

Padding Properties:

Padding Values:

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            background-color: greenyellow;
        }

        p.padding {
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;
            padding-left: 200px;
        }
    </style>
</head>

<body>
    <p> paragraph with no specified padding.</p>
    <p class="padding"> paragraph with specified paddings.</p>
</body>

</html>

Output: