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
).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: |
---|---|
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:
|
Animation type | a length |
Sintaxis
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 Basic 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
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 | ? | ? | ? | ? | ? |