CSS Padding - Ebhor.com

Padding in CSS is the term given to the inner space of an element around its content. CSS allows you to control all the padding of an element; top, bottom, left and right.

The corresponding properties for each side are:
padding-top
padding-bottom
padding-left
padding-right
A general example for the padding can be:

    <style>
        div {
            background-color: wheat;
            padding-top: 60px;
            padding-right: 50px;
            padding-bottom: 60px;
            padding-left: 50px;
            border: 1px solid;
        }
    </style>





<div>
        CSS Padding
</div>

<style>

div {

background-color: wheat;

padding-top: 60px;

padding-right: 50px;

padding-bottom: 60px;

padding-left: 50px;

border: 1px solid;

}

</style>

<div>

CSS Padding

</div>

The values allowed for these properties are:

Length values

The values given in the above example come under this category. Along with px we can also give the length in pt, cm etc.

Percentage

The padding is given in percentage of the width of the containing element. For example:

div {
    background-color: white;
    padding-top: 5%;
    padding-right: 10%;
    padding-bottom: 5%;
    padding-left: 10%
}

div {

background-color: white;

padding-top: 5%;

padding-right: 10%;

padding-bottom: 5%;

padding-left: 10%

}

Here, the 5% of the horizontal space will be acquired by top and bottom padding and similarly case for horizontal space by left and right.

Inherit

Inherits the padding from the parent element. Example:

    <style>
        div.ex1 {
            background-color: wheat;
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 50px;
            padding-left: 80px;
        }
        
        div.ex2 {
            background-color: lightblue;
            padding-top: inherit;
        }
    </style>





<div class="ex1">

<div class="ex2">
            CSS Padding inherit value
</div>

</div>

<style>

div.ex1 {

background-color: wheat;

padding-top: 20px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

div.ex2 {

background-color: lightblue;

padding-top: inherit;

}

</style>

CSS Padding inherit value

</div>

Here, the div that belongs to class ex2 will inherit the top padding from its containing element. Therefore if it is contained inside another div of class ex1, the top padding would be 10px.

Shorthand

The shorthand order for padding is:
Top>Right>Bottom>Left
But here are some interesting cases that you must know.
In general, if you give all the four values, the above sequence will be followed. Therefore, if

div {
	padding: 20px 40px 20px 70px;
}

div {

padding: 20px 40px 20px 70px;

}

Here, top is 20px right is 40px and so on.

In case you give only 3 values, then the first and last values go to top and bottom paddings. The right and left paddings take the middle value each. Example:

div {
	padding: 20px 40px 20px;
}

div {

padding: 20px 40px 20px;

}

So, left and right paddings are 40 px each.

In case of two values, the first value is taken by top and bottom paddings and the second value is for left and right ones.

div {
	padding: 20px 40px;
}

div {

padding: 20px 40px;

}

In case of a single padding value, all the four paddings take that same single value

div {
	padding: 40px;
}

div {

padding: 40px;

}

Another interesting feature about Padding is with the element width. The width of the element is gets rendered as the sum of the actual specified width along with the horizontal margin, horizontal padding and borders. Therefore if following is the case:

div {
     width: 200px;
     padding: 20px;
}

div {

width: 200px;

padding: 20px;

}

The total width would be 240 (i.e. 200+20 for left + 20 for right).

To avoid this and retain the specified width, we use the box-sizing property as:

div {
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}

div {

width: 200px;

padding: 20px;

box-sizing: border-box;

}

In this case, the width is retained. Althoug, the content space for the element will change as per the left and right padding.