The CSS padding property is used to add space around an element inside its borders. It defines the deepest level of the CSS box model. With CSS we can be very precise with paddings.

Specifying the sides for padding:

We can set different paddings to the individual sides of an HTML element. We can set:

• padding-top
• padding-right
• padding-bottom
• padding-left

Acceptable values for padding:

• length – pixel, em, rem etc.
• percent – calculates the padding in percentages relative to its parent element’s width
• inherit – inherits the value from the parent element

Padding shorthands

There are different ways to specify the values for padding. We can add one, two, three or four values. For example:

/* add 10 pixel padding all around the element */
padding: 10px;


/* add 10 pixel to the top and bottom and 20 pixel to the left and right. */
padding: 10px 20px;


/* set top to 10 pixel, left and right to 20 pixel, and bottom to 30 pixel */
padding: 10px 20px 30px;


/* set top to 10 pixel, right to 20 pixel, bottom to 30 pixel, and left to 40 pixel */
padding: 10px 20px 30px 40px;