CSS padding property syntax and examples

The CSS padding feature is a feature of CSS1 that is used to set the margins of the content of HTML elements.

The padding values of the elements are zero by default. For example, if the padding attribute of a paragraph element is not assigned a value, it may appear adjacent to other visual content since the inside margins are zero. The padding-top, padding-right, padding-bottom and padding-left properties can also be used to avoid this situation.

The CSS padding feature can be applied to all html elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.

Syntax:

The standard use of CSS padding is as follows. In this way, the value of all the inner margins of the applied element is assigned.

padding: 10px;

The padding feature can be used with 4 values. In the clockwise direction, the first value is upper, the second value is right, the third value is lower and the fourth value is the left margin. Example:

/* top | right | bottom | left */
padding: 1em 2em 10px 5%;

Padding – Individual Sides

The CSS padding property allows you to set the value of each edge individually.

padding-top Sets the top padding of an html element.
padding-right  Sets the right padding of an html element.
padding-bottom  Sets the bottom padding of an html element.
padding-left  Sets the left padding of an html element.

Example:

p {
/* sets different padding for all four sides */
padding-top: 1em;
padding-right: 5%;
padding-bottom: 25px;
padding-left: 0;
}

CSS Padding Examples

/* Apply to all four sides */
padding: 30px;

/* vertical | horizontal */
padding: 5% 20%;

/* top | horizontal | bottom */
padding: 1em 2em 2em; 

/* top | right | bottom | left */
padding: 2px 1em 0px 1em;
  • In the first example, the padding property applies to all edges.
  • In the second example, the padding property is determined horizontally and vertically.
  • The third example, the padding property has 3 values; the first value is the top, the second value is horizontal, and the third value is bottom.
  • In the fourth example, the padding value of each edge is defined separately.