padding
=======

La propiedad abreviada de CSS **`padding`** establece el área de relleno en los cuatro lados de un elemento a la vez.

Pruébalo
--------

El área de relleno de un elemento es el espacio entre su contenido y su borde.

**Nota:** El relleno crea espacio adicional dentro de un elemento. Por el contrario, `margin` crea espacio extra *alrededor* de un elemento.

Propiedades constituyentes
--------------------------

Esta propiedad es una abreviatura de las siguientes propiedades CSS:

* `padding-top`
* `padding-right` (en-US)
* `padding-bottom`
* `padding-left` (en-US)
Sintaxis
--------


```css
/\* Aplica a los cuatro lados \*/
padding: 1em;

/\* arriba y abajo | izquierda y derecha \*/
padding: 5% 10%;

/\* arriba | izquierda y derecha | abajo \*/
padding: 1em 2em 2em;

/\* arriba | derecha | abajo | izquierda \*/
padding: 5px 1em 0 2em;

/\* Valores globales \*/
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;
```


La propiedad `padding` se puede especificar utilizando uno, dos, tres o cuatro valores. Cada valor es una `<longitud>` o un `<porcentaje>`. Los valores negativos no son válidos.

* Cuando se especifica **un** valor, se aplica el mismo relleno a **los cuatro lados**.
* Cuando se especifican **dos** valores, el primer relleno se aplica a la parte de **arriba y abajo**, el segundo a la **izquierda y la derecha**.
* Cuando se especifican **tres** valores, el primer relleno se aplica a la parte de **arriba**, el segundo a la **derecha e izquierda**, el tercero a la parte de **abajo**.
* Cuando se especifican **cuatro** valores, los rellenos se aplican a la parte de **arriba**, **derecha**, **abajo** e **izquierda** en ese orden (en el sentido de las agujas del reloj).
### Valores

`<longitud>`

El tamaño del relleno como un valor fijo.

`<porcentaje>`

El tamaño del relleno como porcentaje, en relación con el tamaño en línea (*ancho* en un idioma de escritura horizontal, definido por `writing-mode`) del bloque contenedor (en-US).

Definicion formal
-----------------

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `padding-bottom`: `0`
* `padding-left` (en-US): `0`
* `padding-right` (en-US): `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`. |
| Heredable | no |
| Percentages | refer to the width of the containing block |
| Valor calculado | as each of the properties of the shorthand:* `padding-bottom`: the percentage as specified or the absolute length
* `padding-left` (en-US): the percentage as specified or the absolute length
* `padding-right` (en-US): the percentage as specified or the absolute length
* `padding-top`: the percentage as specified or the absolute length
 |
| Animation type | a length |

Sintaxis formal
---------------
```

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

Ejemplos
--------

### Estableciendo relleno con píxeles

#### HTML


```html
<h4>Este elemento tiene un relleno moderado.</h4>
<h3>¡El relleno es enorme en este elemento!</h3>
```


#### CSS


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

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


#### Resultado

### Estableciendo relleno con píxeles y porcentajes


```css
padding: 5%; /\* Todos los lados: 5% de relleno \*/

padding: 10px; /\* Todos los lados: 10px de relleno \*/

padding: 10px 20px; /\* arriba y abajo: 10px de relleno \*/
/\* izquierda y derecha: 20px de relleno \*/

padding: 10px 3% 20px; /\* arriba: 10px de relleno \*/
/\* izquierda y derecha: 3% de relleno \*/
/\* abajo: 20px de relleno \*/

padding: 1em 3px 30px 5px; /\* arriba: 1em de relleno \*/
/\* derecha: 3px de relleno \*/
/\* abajo: 30px de relleno \*/
/\* izquierda: 5px de relleno \*/
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-shorthand |

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* Introducción al modelo de caja básica CSS
* `padding-top`, `padding-right` (en-US), `padding-bottom`, y `padding-left` (en-US).
* Las propiedades lógicas asignadas: `padding-block-start`, `padding-block-end`, `padding-inline-start`, y `padding-inline-end` y las abreviaciones `padding-block` y `padding-inline`