Web/CSS/padding

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

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

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.

Constituent properties

This property is a shorthand for the following CSS properties:

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

Initial value	as each of the properties of the shorthand: `padding-bottom`: `0` `padding-left`: `0` `padding-right`: `0` `padding-top`: `0`
Applies to	all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Percentages	refer to the width of the containing block
Computed value	as each of the properties of the shorthand: `padding-bottom`: the percentage as specified or the absolute length `padding-left`: the percentage as specified or the absolute length `padding-right`: the percentage as specified or the absolute length `padding-top`: the percentage as specified or the absolute length
Animation type	a length

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

Specification	Status	Comment
CSS Basic Box ModelThe definition of 'padding' in that specification.	Working Draft	No change.
CSS Level 2 (Revision 1)The definition of 'padding' in that specification.	Recommendation	No change.
CSS Level 1The definition of 'padding' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`padding`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 3.5	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support: Full support