In this article we will to learn what is CSS Padding property or how to use CSS Padding property or CSS Padding property with example.



CSS Padding property is used to generate the space between the element content and the element border. It is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property.


CSS Padding Properties:-

Padding: It is used to set all the padding properties in one declaration.

padding-left: It is used to set left padding of an element.

padding-right: It is used to set right padding of an element.

padding-top: It is used to set top padding of an element.

padding-bottom: It is used to set bottom padding of an element.


CSS Padding Values:-

Length: It is used to define fixed padding in pt, px, em etc.

%: It defines padding in % of containing element.


Example of CSS Padding property:

<!DOCTYPE html>
        p {
            background-color: #ffd800;
            .padding {
                padding-top: 50px;
                padding-right: 100px;
                padding-bottom: 150px;
                padding-left: 200px;
    <p>This is a paragraph with no defined padding.</p>
    <p class="padding">This is a paragraph with defined paddings.</p>


 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like