Característica del Padding en CSS

Los padding CSS en forma abreviada de propiedad establecerá el relleno en los cuatro extremos de un elemento. Esta propiedad se puede utilizar en lugar de establecer los acolchados individuales con padding-top, padding-right, padding-bottom y padding-left.

Funciones del Padding

Valor inicial	Para cada función corta: `padding-bottom`: `padding-left`: `padding-right`: `padding-top`:
Aplicado a	Todos los elementos, excepto los elementos de la tabla en los que el valor de la propiedad no es igual a `display` una de las palabras reservadas `table-caption`, `table` y `inline-table`.
Heredable	No
Móvil	Si
Valor calculado	Un porcentaje o longitud absoluta.

/* padding en los cuatro lados */
padding: 1em;

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

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

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

/* <em>valores globales</em>  */
padding: inherit;
padding: initial;
padding: unset;

Ejemplos del Padding en CSS

Para establecer notas al pie hasta 5%el ancho del elemento de bloque que contiene el elemento de destino:

padding :  5 %;

Para establecer las notas al pie en todos los lados para 10px:

padding :  10px ;

Para establecer las notas al pie en los extremos superior e inferior de 1.6em, y los extremos izquierdo y derecho en 20px, usaremos la regla:

padding :  1 . 6em  20px ;

Para establecer las notas al pie en el extremo superior 10px, el extremo inferior en 1em y los extremos izquierdo y derecho en 3%, usaremos la regla:

padding :  10px  3 %  1em ;

La propiedad padding se puede utilizar para ajustar los valores de la padding-top, padding-right, padding-bottom y padding-left todos los atributos de la regla es:

padding :  10px  3px  30px  5px ;

Las siguientes reglas son equivalentes:

padding-top :  10px ; 
padding-right :  3px ; 
padding-bottom :  30px ; 
padding-left :  5px ;

Tenga en cuenta la cantidad de espacio de anotación entre el marco y el contenido.

Soporte padding en los navegadores

Característica	Chrome	Firefox	Internet Explorer	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0

Funcionamiento general del padding en CSS

La propiedad acepta padding uno, dos, tres o cuatro valores, y cada valor puede ser una longitud <length> o un porcentaje <percentage>.

Cuando se especifica un solo valor, se aplicará a todos los lados.
Cuando se especifican dos valores, el primer valor se aplicará a los extremos superior e inferior, y el segundo valor a los extremos izquierdo y derecho.
Cuando se especifican tres valores, el primer valor se aplicará al extremo superior, el segundo valor a los extremos izquierdo y derecho y el tercer valor al extremo inferior.
Cuando se especifican cuatro valores, los valores se aplicarán al extremo superior, luego al lado derecho, luego al inferior y luego al izquierdo, respectivamente (es decir, la rotación comienza desde el extremo superior y continúa en el sentido de las agujas del reloj).

`<length>`

Determine el valor de la nota al pie en longitudes absolutas, y el valor no puede ser negativo.

`<percentage>`

Especifica el valor de la nota al pie como un porcentaje del ancho del elemento de bloque que contiene el elemento actual, y el valor no puede ser negativo.

Estructura formal

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