Padding in CSS

Here, we are going to learn about the padding in CSS (Cascading Style Sheet), how to define and apply paddings on an object using CSS?
Submitted by Anjali Singh, on October 09, 2019

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

Syntax:

    element_name
    {
        padding: length|initial|inherit;
    }

Padding Shorthand

To add padding to each side individually (using padding-top, padding-left, etc) can you write it as a shorthand, as below:

Example (Four values):

<!DOCTYPE html>

<head>
    <style>
        .myDiv {
            /* top right bottom left; */
            padding: 25px 50px 75px 100px;
            /*background color*/
            background-color: #006969;
            /*text color*/
            color: #ffffff;
            /*width*/
            width: 300px;
        }
    </style>
</head>
<html>

<body>
<p class="myDiv">
This site is specially designed to provide help to students, 
working professionals and job seekers. We are fully dedicated to make each 
tutorial very simple to learn and understand. This site is not created for business purpose, 
but for spreading education about programming languages and to help the concerned learners 
out who are enthusiastic to learn new technologies.</p>
</body>

</html>

Output

Here the padding is done is all directions with different value in each direction.

Example (Three values):

    .myDiv
    {
        /* top left/right bottom */ 
        padding: 25px 50px 75px; 
    }

Example (Two values):

    .myDiv 
    {
        /* top/bottom left/right */
        padding: 25px 50px; 
    }

Example (One value):

    .myDiv {
        /* top/right/bottom/left */
        padding: 25px; 
    }

Here the padding is done in all four directions with same value.

Padding on a given side

You can specify a side individually,

Padding-top
Padding-right
Padding-bottom
Padding-left

Example:

<!DOCTYPE html>

<head>
    <style>
        .myDiv {
            padding-right: 25px;/* right ; */
            /*background color*/
            background-color: #006969;
            /*text color*/
            color: #ffffff;
            /*width*/
            width: 300px;
        }
    </style>
</head>
<html>

<body>
<p class="myDiv">
This site is specially designed to provide help to students, 
working professionals and job seekers. We are fully dedicated to make each 
tutorial very simple to learn and understand. This site is not created for business purpose, 
but for spreading education about programming languages and to help the concerned learners 
out who are enthusiastic to learn new technologies.</p>
</body>

</html>

Output

The above code would add a padding of 25px to the right of the paragraph.

CSS Tutorial & Examples »

Height and Width in CSS

Text Formatting in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples