Paddings in CSS3

In CSS padding is a property which is used to put some space inside of some targeted box or any specific element.There are following properties of padding are explained below.

1) padding-top
2) padding-right
3) padding-bottom
4) padding-left

These all properties are defined and explained below with example and source code.Hope you will enjoy it.

Example of padding-top

<style type="text/css">
.out-p1{
padding-top: 50px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-p1{
width: 100%;
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>

<div class="out-p1">
<div class="in-p1">
There are two div here.Outer div has 50px padding from top.The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from top.The inner div has lightyellow background color and some text

Example of padding-right

<style type="text/css">
.out-d2{
padding-right: 50px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d2{
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>

<div class="out-d2">
<div class="in-d2">
There are two div here.Outer div has 50px padding from right.The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from top.The inner div has lightyellow background color and some text.

Example of padding-bottom

<style type="text/css">
.out-d3{
padding-bottom: 50px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d3{
border: 1px solid blue;
height: 100px;
background: lightyellow;
}
</style>

<div class="out-d3">
<div class="in-d3">
There are two div here.Outer div has 50px padding from bottom.The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from bottom.The inner div has lightyellow background color and some text.

Example of padding-left

<style type="text/css">
.out-d4{
padding-left: 50px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d4{
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>

<div class="out-d4">
<div class="in-d4">
There are two div here.Outer div has 50px padding from left.The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from left.The inner div has lightyellow background color and some text.

Example of padding shorthands

Padding with four values

<style type="text/css">
.out-d5{
padding: 50px 30px 50px 30px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d5{
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>

<div class="out-d5">
<div class="in-d5">
There are two div here.Outer div has 50px padding from top and bottom.And also outer div has 30px padding from left and right. The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from top and bottom.And also outer div has 30px padding from left and right. The inner div has lightyellow background color and some text.

Padding with three values

<style type="text/css">
.out-d5{
padding: 50px 30px 50px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d5{
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>

<div class="out-d5">
<div class="in-d5">
There are two div here.Outer div has 50px padding from top and bottom.And also outer div has 30px padding from left and right. The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from top and bottom.And also outer div has 30px padding from left and right. The inner div has lightyellow background color and some text.

Padding with two values

<style type="text/css">
.out-d6{
padding: 50px 30px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d6{
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>

<div class="out-d6">
<div class="in-d6">
There are two div here.Outer div has 50px padding from top and bottom.And also outer div has 30px padding from left and right. The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from top and bottom.And also outer div has 30px padding from left and right. The inner div has lightyellow background color and some text.

Padding with one value

<style type="text/css">
.out-d7{
padding: 50px;
width: 100%;
border: 1px solid red;
height: 150px;
}
.in-d7{
border: 1px solid blue;
height: 150px;
background: lightyellow;
}
</style>

<div class="out-d7">
<div class="in-d7">
There are two div here.Outer div has 50px padding from top,bottom,left and right. The inner div has lightyellow background color and some text.
</div>
</div>

Output of above code

There are two div here.Outer div has 50px padding from top,bottom,left and right. The inner div has lightyellow background color and some text.







The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.