@codeswithpankaj

CSS Padding

Welcome to the CSS Padding tutorial on codeswithpankaj.com. In this tutorial, we will explore the padding property in CSS, including individual padding properties (padding-top, padding-right, padding-bottom, padding-left) and shorthand notation.

CSS Padding Properties

1. Individual Padding Properties

CSS allows you to specify padding for each side of an element using individual properties:

  • padding-top: Sets the padding for the top of the element.

  • padding-right: Sets the padding for the right side of the element.

  • padding-bottom: Sets the padding for the bottom of the element.

  • padding-left: Sets the padding for the left side of the element.

Example:

p {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Individual Padding Properties - codeswithpankaj.com</title>
    <style>
        p {
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 20px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <p>This paragraph has different padding on each side.</p>
</body>
</html>

2. Shorthand Padding Property

The padding property allows you to specify all four paddings in a single declaration in the following order: padding: top right bottom left;.

Example:

p {
    padding: 20px 30px;
}

Here, 20px is the top and bottom padding, and 30px is the right and left padding.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shorthand Padding Property - codeswithpankaj.com</title>
    <style>
        p {
            padding: 20px 30px;
        }
    </style>
</head>
<body>
    <p>This paragraph has 20px top and bottom padding, and 30px right and left padding.</p>
</body>
</html>

3. Practical Examples

Example 1: Using Individual Paddings

p {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Example 2: Using Shorthand Padding

p {
    padding: 10px 20px;
}

Conclusion

CSS padding properties (padding, padding-top, padding-right, padding-bottom, padding-left) allow you to create space around elements on your web page effectively. By mastering these properties, you can control the spacing between content and the borders of elements. Stay tuned to codeswithpankaj.com for more tutorials and web development tips!

PreviousCSS MarginsNextCSS Height, Width and Max-width

Last updated