CSS Examples

How to Set the Padding Around an Element using CSS

In this example, we will learn how to set the padding around an element using CSS. We can use the padding-top, padding-right, padding-bottom, and padding-left properties to set the padding at the top, right, bottom, and left side of the inside element box. We can also use the padding property as the shorthand property of these properties.

Prerequisites

Example

HTML

    <div class="main-element">
        This is the main element
    </div>

CSS

        .main-element{
            border: 1px solid black;
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 0px;
            padding-left: 30px;
        }

Output

How to Set the Padding Around an Element using CSS

Here, we used padding-top to set the padding at the top of the element, padding-right at the right side of the element, padding-bottom at the bottom of the element and padding-left at the left side of the element. We can also use the shorthand padding property as padding:

Conclusion

In this example, we learned how to set the padding around an element using CSS. We used the padding-top, padding-right, padding-bottom, and padding-left properties to set the padding at the top, right, bottom, and left side of the inside element box.