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
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;.
Next Previous
Was this article helpful?
