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.

Example

code

paddign:0px;
strong

padding:5px 10px;
bold

padding:10px 20px;
italic

padding:15px 30px;
Try </>

padding-top

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

Example

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

padding-right

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

Example

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

padding-bottom

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

Example

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

padding-left

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

Example

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

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

Example

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

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

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

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;.

Example

  • list item1
  • list item2
  • list item3
  • list item4
Try </>


Was this article helpful?

 

Email:

Message: