CSS padding (relleno)
CSS padding (relleno) es una propiedad abreviada que define el espacio entre el borde del elemento y su contenido, es decir, el relleno superior, derecho, inferior e izquierdo.
padding (relleno)
Cuando el relleno (padding) de un elemento se elimina, el área liberada se llena con el color de fondo del elemento.
Usar la propiedad padding por sí sola puede cambiar el relleno superior, derecho, inferior e izquierdo.
Valores posibles
| Valor | Descripción |
|---|---|
| length | Define un relleno fijo (píxeles, pt, em, etc.) |
| % | Define un relleno usando valores de porcentaje |
Relleno: propiedades de padding para un lado
En CSS, se puede especificar un relleno diferente para cada lado:
- El relleno superior es de 25px
- El relleno derecho es de 50px
- El relleno inferior es de 25px
- El relleno izquierdo es de 50px
Relleno: propiedad abreviada
Para acortar el código, se pueden especificar todas las propiedades de relleno en una sola propiedad.
Esto se llama propiedad abreviada. La propiedad abreviada para todas las propiedades de relleno espadding :
La propiedad padding puede tener de uno a cuatro valores.
padding:25px 50px 75px 100px;
- Relleno superior: 25px
- Relleno derecho: 50px
- Relleno inferior: 75px
- Relleno izquierdo: 100px
padding:25px 50px 75px;
- Relleno superior: 25px
- Relleno izquierdo y derecho: 50px
- Relleno inferior: 75px
padding:25px 50px;
- Relleno superior e inferior: 25px
- Relleno izquierdo y derecho: 50px
padding:25px;
- Todos los rellenos son de 25px
Más ejemplos
Todas las propiedades de relleno en una sola declaración
Este ejemplo demuestra cómo usar la propiedad abreviada para establecer todas las propiedades de relleno en una sola declaración, con uno a cuatro valores.
Establecer el relleno izquierdo
Este ejemplo demuestra cómo establecer el relleno izquierdo de un elemento.
Establecer el relleno derecho
Este ejemplo demuestra cómo establecer el relleno derecho de un elemento.
Establecer el relleno superior
Este ejemplo demuestra cómo establecer el relleno superior de un elemento.
Establecer el relleno inferior
Este ejemplo demuestra cómo establecer el relleno inferior de un elemento.
Todas las propiedades de relleno CSS
| Propiedad | Descripción |
|---|---|
| padding | Establece todas las propiedades de relleno en una sola declaración usando la propiedad abreviada |
| padding-bottom | Establece el relleno inferior de un elemento |
| padding-left | Establece el relleno izquierdo de un elemento |
| padding-right | Establece el relleno derecho de un elemento |
| padding-top | Establece el relleno superior de un elemento |