CSS Padding

allows you to add space between the content of an element and its border.
It creates an empty area around the content within the element.
we can declare the value of Padding in may ways. Negative values are also accepted
These formats are applicable to many styles.
Here are the margin properties defines thier respective side

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Padding Examples</title>
        <style>
            p {
                background-color: #4caf50;
                color: white;
            }
            .p {
                padding: 12px;
            }
            .pt {
                padding-top: 12px;
            }
            .pl {
                padding-left: 12px;
            }
            .pr {
                padding-right: 12px;
            }
            .pb {
                padding-botom: 12px;
            }
        </style>
    </head>
    <body>
        <p class="p">Paragraph text with equal padding for all sides</p>
        <p class="pt">Paragraph tezt with padding given at the top</p>
        <p class="pl">Paragraph tezt with padding given at the left</p>
        <p class="pr">Paragraph tezt with padding given at the right</p>
        <p class="pb">Paragraph tezt with padding given at the bottom</p>
    </body>
</html>
Run

Padding Sides

We can set the Padding differently for all sides using Padding property itself. It is similar to margin property.
If you define only single value in the Padding then it apples all the sides. Similarly If you define only two values in the Padding then it apply to Top and Right sides. Similarly if you define three values in the Padding then it apply to Top, Right and Bottom sides. Similarly if you define four values in the Padding then it apply to Top, Right, Bottom, Left.

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Padding Examples</title>
        <style>
            p {
                background-color: #4caf50;
                color: white;
            }
            .p1 {
                padding: 10px;
            }
            .p2 {
                padding: 15px 10px;
            }
            .p3 {
                padding: 20px 15px 10px;
            }
            .p4 {
                padding: 25px 20px 15px 10px;
            }
        </style>
    </head>
    <body>
        <p class="p4">Paragraph text has differnt padding for each sides</p>
        <p class="p3">Paragraph text has differnt padding for Top, Right and Bottom sides</p>
        <p class="p2">Paragraph text has differnt padding for only Top and Right sides</p>
        <p class="p1">Paragraph text has equal padding for each sides</p>
    </body>
</html>
Run

Width and height for padding

While using padding along with width. It adds the padding value to the width of left and right sides.
Ex: width:100px;
padding: 20px;
total width would br 140
Because it adds 20px to the left and right sides.

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Padding Examples</title>
        <style>
            .box {
                width: 200px;
                height: 100px;
                padding: 20px;
                color: white;
                background-color: #4caf50;
            }
        </style>
    </head>
    <body>
        <p class="box">Paragraph box</p>
    </body>
</html>
Run

Quick Recap - Topics Covered

Property

Description

Example

padding

Create's padding around an HTML element.

Run

padding-top

Create's padding on top of HTML element.

Run

padding-left

Create's padding on left of HTML element.

Run

padding-right

Create's padding on right of HTML element.

Run

padding-bottom

Create's padding on bottom of HTML element.

Run

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK