Propiedades CSS Relleno
Los CSS padding propiedades se utilizan para generar el espacio alrededor del contenido.
Las propiedades de relleno establecen el tamaño del espacio en blanco entre el contenido del elemento y el elemento de la frontera.
Este elemento tiene un acolchado de 50 px.
Relleno CSS
Las propiedades de relleno CSS definen el espacio en blanco entre el contenido del elemento y el elemento de la frontera.
El relleno de borra un área alrededor del contenido (en el interior de la frontera) de un elemento.
 | Nota: El relleno se ve afectado por el color de fondo del elemento! |
|---|
Con CSS, tiene un control total sobre el relleno. Hay propiedades CSS para establecer el relleno para cada lado de un elemento (arriba, derecha, abajo, e izquierda).
El relleno - Lados individuales
CSS tiene propiedades para especificar el relleno para cada lado de un elemento:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Todas las propiedades de relleno pueden tener los siguientes valores:
- longitud - especifica un relleno en px, pt, cm , etc.
- % - Especifica un relleno en% de la anchura del elemento que contiene
- heredarán - especifica que el relleno debe ser heredado de elemento padre
El ejemplo siguiente establece diferentes relleno para los cuatro lados de un <p> elemento:
Ejemplo
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
} Inténtalo tú mismo " El relleno - Abreviación de las propiedades
Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad.
El padding la propiedad es una propiedad resumida para las siguientes propiedades de relleno individuales:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Así pues, aquí es cómo funciona:
Si el padding propiedad tiene cuatro valores:
- padding: 25px 50px 75px 100px;
- acolchado superior es 25px
- relleno derecho es 50px
- acolchado inferior es 75 px
- relleno a la izquierda es 100px
Si el padding propiedad tiene tres valores:
- padding: 25px 50px 75px;
- acolchado superior es 25px
- rellenos derecha e izquierda son 50px
- acolchado inferior es 75 px
Si el padding la propiedad tiene dos valores:
- padding: 25px 50px;
- acolchados superior e inferior son 25px
- rellenos derecha e izquierda son 50px
Si el padding propiedad tiene un valor:
- padding: 25px;
- los cuatro rellenos son 25px
Más ejemplos
Todas las propiedades de relleno en una declaración
Este ejemplo demuestra una propiedad abreviada para establecer todas las propiedades de relleno en una declaración, puede tener de uno a cuatro valores.
Ajuste el relleno a la izquierda
Este ejemplo muestra cómo establecer el relleno a la izquierda de un <p> elemento.
Ajuste el relleno derecho
Este ejemplo muestra cómo establecer el relleno derecho de un <p> elemento.
Ajuste el relleno superior
Este ejemplo muestra cómo establecer el relleno superior de un <p> elemento.
Establecer el relleno inferior
Este ejemplo muestra cómo establecer el relleno de fondo de un <p> elemento.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »
Todas las propiedades CSS de relleno
| Propiedad | Descripción |
|---|---|
| padding | Una propiedad abreviada para establecer todas las propiedades de relleno en una declaración |
| padding-bottom | Establece el relleno inferior de un elemento |
| padding-left | Establece el relleno a la izquierda de un elemento |
| padding-right | Establece el relleno derecho de un elemento |
| padding-top | Establece el relleno superior de un elemento |