Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

padding

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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).

Valor inicialas each of the properties of the shorthand:
Applies toall 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.
Heredableno
Percentagesrefer to the width of the containing block
Mediavisual
Valor calculadoas 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
Animatableyes, as a length
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Sintaxis formal: [ <length> | <percentage> ]{1,4}

Valores

Especifica 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%;               /* en todos los lados 5% de padding */
 padding: 10px;              /* en todos los lados 10px de padding */
 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;
}

Live Sample Link

Especificaciones

Especificación Estado Comentario
CSS Basic Box Model
The definition of 'padding' in that specification.
Working Draft Sin cambio.
CSS Level 2 (Revision 1)
The definition of 'padding-top' in that specification.
Recommendation Sin cambio.
CSS Level 1
The definition of 'padding' in that specification.
Recommendation Definición inicial.

Compatibilidad en navegadores

Características Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Características Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? ? ? ? ?

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: arielnoname, Sebastianz, fscholz, teoli, maiky
 Última actualización por: arielnoname,