HTML Dog
Skip to navigation

CSS Property: padding

The padding of a box, inside the margin and border areas, and outside the content area.

With one value, the padding property can be used to specify uniform padding around a box. With two, three, or four values, sides can be specified independently.

Possible Values

ValueNoteExample
[length]Should not be a negative value.10px
[percentage]Calculated as a percentage of the containing box’s width.
Should not be a negative value.
25%
inherit
initial
unset

Multiple Values

One, two, three, or four space-separated values:

ValueNoteExample
[value][top, right, bottom, and left]10px
[value] [value][top and bottom] [left and right]10px 20px
[value] [value] [value][top] [right and left] [bottom]10px 20px 30px
[value] [value] [value] [value][top] [right] [bottom] [left]10px 20px 30px 40px

Example


#gull { padding: 12px; }
/* Uniform padding of 12px on all four sides */

#swan { padding: 20% 40%; }
/* Top and bottom padding are each 20% of the containing box's width. Left and right padding are each 20% of the containing box's width. */

#tern { padding: 20% inherit 2.5em; }
/* Top padding is 20% of the containing box's width. Left and right padding are inherited. Bottom padding is 2.5em */

#grebe { padding: 10px 20px 30px 40px; }
/* Top padding is 10px. Right padding is 20px. Bottom padding is 30px. Left padding is 40px. */

Browser support