Propiedad de relleno CSS
Ejemplo
Establezca el relleno para los cuatro lados de un elemento <p> en 35 píxeles:
p {
padding: 35px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El relleno de un elemento es el espacio entre su contenido y su borde.
La padding
propiedad es una propiedad abreviada para:
Nota: el relleno crea espacio adicional dentro de un elemento, mientras que el margen crea espacio adicional alrededor de un elemento.
Esta propiedad puede tener de uno a cuatro valores.
Si la propiedad padding tiene cuatro valores:
- relleno: 10px 5px 15px 20px;
- el relleno superior es 10px
- el relleno derecho es 5px
- el relleno inferior es 15px
- el relleno izquierdo es 20px
Si la propiedad padding tiene tres valores:
- relleno: 10px 5px 15px;
- el relleno superior es 10px
- relleno derecho e izquierdo son 5px
- el relleno inferior es 15px
Si la propiedad padding tiene dos valores:
- relleno: 10px 5px;
- el relleno superior e inferior son 10px
- relleno derecho e izquierdo son 5px
Si la propiedad padding tiene un valor:
- relleno: 10px;
- los cuatro rellenos son 10px
Nota: No se permiten valores negativos.
Valor por defecto: | 0 |
---|---|
Heredado: | No |
Animable: | si, ver propiedades individuales . Leer sobre animable |
Versión: | CSS1 |
Sintaxis de JavaScript: | objeto .style.padding="100px 20px" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Sintaxis CSS
padding: length|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
% | Specifies the padding in percent of the width of the containing element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Establezca el relleno para un elemento <p> en 35 píxeles para la parte superior e inferior y en 70 píxeles para la derecha y la izquierda:
p {
padding: 35px 70px;
}
Ejemplo
Establezca el relleno para un elemento <p> en 35 píxeles para la parte superior, 70 píxeles para la derecha y la izquierda y 50 píxeles para la parte inferior:
p {
padding: 35px 70px 50px;
}
Ejemplo
Establezca el relleno para un elemento <p> en 35 píxeles para la parte superior, 70 píxeles para la derecha, 50 píxeles para la parte inferior y 90 píxeles para la izquierda:
p {
padding: 35px 70px 50px 90px;
}
páginas relacionadas
Tutorial de CSS: relleno CSS
Tutorial de CSS: modelo de caja CSS
Referencia HTML DOM: propiedad de relleno