padding
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 | ? | ? | ? | ? | ? |