CSS and Padding

css CSS and Padding Shorthand Padding

CSS Padding

Padding define the space in outside the container like this:

This div has a Padding of 50px.

CSS Padding Properties

You can can apply Padding properties to each side of element individually.

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

You can sets the Padding on all four sides differently

Example

<html>
<head>
<style>
 .paragraph {
    Padding-top: 50px;
    Padding-bottom: 80px;
    Padding-right: 100px;
   Padding-left: 100px;
}

</style>
</head>
<body>

<p class="paragraph">Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides<br>
Padding set differently on all four sides</p>

</body>
</html>

Shorthand Property

Above four properties can use in single statement like this:

Syntax div{Padding:top right bottom left; } Example


<style>
.short {
   Padding:20px 30px 40px 50px;
    border: 2px dashed #a2a2a2;
}
</style>

<div class="short">This element has a shorthand Padding property applied .</div>

Padding:15px 10px; -Top and bottom have a Padding of 15 pixels. -Right and left have a Padding of 10 pixels.

Padding:15px 10px 40px; -Left and right are 10px -Bottom is 30px

Padding on all Sides

This example set the Padding on all four sides


<style>
.allside{
   Padding:30px ;
    border: 2px dashed blue;
}
</style>

<div class="allside">
This Padding property set 30px on all four sides top,right,bottom and left.
</div>

css Shorthand Padding Chapter Next »