padding

Resumen

La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.

La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).

Pruébalo

Nota: Padding crea espacio extra dentro de un elemento. En contraste, margin crea espacio extra alrededor de un elemento.

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

Sintaxis formal: padding = 
  <'padding-top'>{1,4}

Valores

Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:

<length>: Especifica un ancho fijo no negativo. Ver más detalles <length> .
<percentage>: Con respecto a la anchura("width") del bloque que lo contiene.

Uno: un valor unico se aplica a los 4 lados.
Dos: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha e izquierda.
Tres: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el tercer valor se aplica a abajo del elemento.
Cuatro: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda.

Ejemplos

 padding: 5%;               /* aplica 5% de padding en todos los lados*/

 padding: 10px;              /* aplica 10px de padding en todos los lados */

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

 padding: 10px 3% 20px;      /*  arriba, 10px de padding          */
                             /*  izquierda y derecha, 3% de padding */
                             /*  bottom, 20px padding       */

 padding: 1em 3px 30px 5px;  /*  arriba    1em  padding  */
                             /*  derecha  3px  padding  */
                             /*  abajo 30px padding  */
                             /*  izquierda   5px  padding
                 /* en dirección de las agujas del reloj */

border:outset; padding:5% 1em;

Ver ejemplo

HTML

<h4>¡Hola Mundo!</h4>
<h3>El padding es diferente en esta linea.</h3>

CSS

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

h3{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}

Especificaciones

Especificación	Estado	Comentario
CSS Box Model La definición de 'padding' en esta especificación.	Candidate Recommendation	Sin cambio.
CSS Level 2 (Revision 1) La definición de 'padding-top' en esta especificación.	Recommendation	Sin cambio.
CSS Level 1 La definición de 'padding' en esta especificación.	Recommendation	Definición inicial.

Compatibilidad en navegadores

BCD tables only load in the browser

Ver también

CSS Box Model