Web4College

CSS padding

padding is an area between the text (the content that element contains) and the boundary of the element. The value of the padding should always be positive. The value may be in some unit (px, em) or percentage.

Preview Example
Try it

padding-top

It specifies the thickness of the padding on the top of text and the border.

Example
Try it
<style>
div{padding-top:100px;}
</style>

padding-right

It defines the padding from the right side of text (box) to the right side border.

Example
Try it
<style>
div{padding-right:150px;}
</style>

padding-bottom

It represents the padding area from the bottom side of the text (box) to the bottom border.

Example
Try it
<style>
div{padding-bottom:100px;}
</style>

padding-left

It is the padding area from the left side of the text (box) to the left side border.

Example
Try it
<style>
div{padding-left:100px;}
</style>

All of the above four properties can be written using only padding property.

Example
Try it
<style>
div{padding:padding-top padding-right padding-bottom padding-left;}
div{padding:80px 40px 20px 5px;}
</style>

padding - A shorthand property

The padding property specifies four values for four different sides. Four values are separated by spaces. The frist value for top, second for right, third for bottom and fourth value is for left side.

padding:20px; is the same as

padding:20px 20px 20px 20px;

padding:100px 50px; is the same as

padding:100px 50px 100px 50px;

padding:100px 75px 50px; is the same as

padding:100px 75px 50px 70px;

Example
Try it
<style>
div{padding:20px;}
div{padding:100px 50px;}
div{padding:100px 75px 50px;}
</style>

Examples

The padding property may be applied on all the visual elements. It may be applied on the list items, links, table heading and table data etc.

list items

The padding property is defined for the ul in the following example. The value of padding property is 15px 30px;.

Preview Example
Try it