CSS Padding

The CSS Padding is the space between the border of an html element and the actual content inside the element. Like css margin, the html elements can have padding on all the four sides and the padding property cannot be inherited from its parent container.

The above picture depicts the padding clearly, where the inner block is padded with some white space (marked with green text) between its border and the text content.

Example

See the below two html blocks, first without padding and the next with padding.

html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding. html block without padding.

html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding. html block with padding.

The css padding property can be set individually for each side of an html element like

padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

Note: The value can be of units (like pixel, point etc) or percentage.

Else all the four padding values can be defined in a single line like below,

padding: padding-top padding-right padding-bottom padding-left;

The css padding property takes up 4, 3, 2 or a single parameter.

CSS Padding with Four Parameters

If you want padding of 5 pixels to the top, 10 pixels to the bottom and left and right with 5 pixels for an element then you can use,

padding: 5px 5px 10px 5px;

CSS Padding with Three Parameters

The padding property can be set with three parameters like,

padding: 10px 5px 20px;

The html element will be set with padding of top => 10px, left/right => 5px and bottom => 20px. The left and right side takes up the same padding value.

Note: If padding is declared with two or three values, the undeclared values are taken from the opposite side.

CSS Padding with Two Parameters

If we want to set the padding on top-bottom and left-right with same value then it can be written with two parameters like below.

padding: 5% 10px;

1. First parameter refers to the padding of top and bottom side.
2. Second parameter refers to the padding of left and right side.

CSS Padding with Single Parameter

If we want all the four sides with equal padding value then it can be written with a single parameter like below.

padding 0;

Here the padding for all the four sides will be set to 0 (no padding).

Note: if padding for a side(s) is 0 (zero), then no need to suffix with units (such as px) or %.