padding

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

An element's padding area is the space between its content and its border.

Constituent properties

This property is a shorthand for the following CSS properties:

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

Syntax

/* Apply to all four sides */
padding: 1em;

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

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

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

/* Global values */
padding: inherit;
padding: initial;
padding: unset;

The padding property may be specified using one, two, three, or four values. Each value is a <length> or a <percentage>. Negative values are invalid.

• When one value is specified, it applies the same padding to all four sides.
• When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
• When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom.
• When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).

Values

<length>

The size of the padding as a fixed value.

<percentage>

The size of the padding as a percentage, relative to the width of the containing block.

Formal definition

Formal syntax

[ <length> | <percentage> ]{1,4}

Examples

Setting padding with pixels

HTML

<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

Result

Setting padding with pixels and percentages

padding: 5%;                /* All sides: 5% padding */

padding: 10px;              /* All sides: 10px padding */

padding: 10px 20px;         /* top and bottom: 10px padding */
                            /* left and right: 20px padding */

padding: 10px 3% 20px;      /* top:            10px padding */
                            /* left and right: 3% padding   */
                            /* bottom:         20px padding */

padding: 1em 3px 30px 5px;  /* top:    1em padding  */
                            /* right:  3px padding  */
                            /* bottom: 30px padding */
                            /* left:   5px padding  */ 

Specifications

Browser compatibility

See also

• Introduction to the CSS basic box model
• padding-top, padding-right, padding-bottom, and padding-left.
• The mapped logical properties: padding-block-start, padding-block-end, padding-inline-start, and padding-inline-end and the shorthands padding-block and padding-inline