padding
=======

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

Try it
------

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:

* `padding-top`
* `padding-right`
* `padding-bottom`
* `padding-left`
Syntax
------


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

/\* top and bottom | left and right \*/
padding: 5% 10%;

/\* top | left and right | bottom \*/
padding: 1em 2em 2em;

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

/\* Global values \*/
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
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 inline size (*width* in a horizontal language, defined by `writing-mode`) 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
-------------
```

padding =   
  <'padding-top'>{1,4}    
  
```

Examples
--------

### Setting padding with pixels

#### HTML


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


#### CSS


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

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


#### Result

### Setting padding with pixels and percentages


```css
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 |
| --- |
| CSS Box Model Module Level 3 # padding-shorthand |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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`