Características padding en CSS

por
Características padding en CSS

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

Funciones padding css

Valor inicialPara cada función corta:
1-padding-bottom: 0.
2-padding-left: 0.
3-padding-right: 0.
4-padding-top: 0.
Aplicado aTodos 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.
HeredableNo
MóvilSí
Valor calculadoUn porcentaje o longitud absoluta.
/* relleno en los cuatro lados */ 
padding :  1em ;
/* vertical | horizontal */ 
padding :  5%  10%;
/* arriba | horizontal | fondo */ 
padding :  1em  2em  2em ;
/* arriba | derecha | abajo | izquierda */ 
padding :  5px  1em  0  1em ;
/* valores globales */ 
padding: inherit;
padding: initial;
padding: unset;

Ejemplos y aplicaciones en código

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

padding: 7%;

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

padding: 12px;

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

padding: 1.5em 23px;

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

padding: 9px 5% 3em;

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: 12px 5px 23px 8px;

Las siguientes reglas son equivalentes:

padding-top: 12px;
padding-right: 5px;
padding-bottom: 23px;
padding-left: 8px;

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

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.04.03,51.0

Características generales

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.
  • 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 padding css

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

Consultar también

  • La página de sub-propiedades que los conjuntos de atributos de relleno son: padding-top,  padding-bottom, padding-right y padding-left.
  • En la página de propiedades margin establece los márgenes en los cuatro extremos del elemento.
  • La página de propiedades position que describe cómo se debe colocar el elemento en el documento.