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 inicial as each of the properties of the shorthand:
padding-bottom : 0
padding-left : 0
padding-right : 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 .
Heredable no
Percentages refer to the width of the containing block
Media visual
Valor calculado as 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
Animation type a length
Canonical order el 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 Working Draft Sin cambio.
La definición de 'padding' en esta especificación.
CSS Level 2 (Revision 1) Recommendation Sin cambio.
La definición de 'padding-top' en esta especificación.
CSS Level 1 Recommendation Definición inicial.
La definición de 'padding' en esta especificación.
Compatibilidad en navegadores
We're converting our compatibility data into a machine-readable JSON format. This
compatibility table still uses the old format, because we haven't yet converted the data it
contains. Find out how you can help!
Escritorio Móvil
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 ? ? ? ? ?