Relleno CSS
El relleno se utiliza para crear espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
Relleno CSS
Las propiedades CSS paddingse utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
Con CSS, tienes control total sobre el relleno. Hay propiedades para establecer el relleno para cada lado de un elemento (superior, derecho, inferior e izquierdo).
Acolchado - Lados individuales
CSS tiene propiedades para especificar el relleno para cada lado de un elemento:
padding-toppadding-rightpadding-bottompadding-left
Todas las propiedades de relleno pueden tener los siguientes valores:
- longitud : especifica un relleno en px, pt, cm, etc.
- % - especifica un relleno en % del ancho del elemento contenedor
- heredar: especifica que el relleno se debe heredar del elemento principal
Nota: No se permiten valores negativos.
Ejemplo
Establezca un relleno diferente para los cuatro lados de un elemento <div>:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Relleno - Propiedad abreviada
Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad.
La paddingpropiedad es una propiedad abreviada para las siguientes propiedades de relleno individuales:
padding-toppadding-rightpadding-bottompadding-left
Pues así es como funciona:
Si la paddingpropiedad tiene cuatro valores:
- relleno: 25px 50px 75px 100px;
- el relleno superior es 25px
- el relleno derecho es 50px
- el relleno inferior es 75px
- el relleno izquierdo es 100px
Ejemplo
Utilice la propiedad abreviada padding con cuatro valores:
div {
padding: 25px 50px 75px 100px;
}
Si la paddingpropiedad tiene tres valores:
- relleno: 25px 50px 75px;
- el relleno superior es 25px
- los rellenos derecho e izquierdo son 50px
- el relleno inferior es 75px
Ejemplo
Utilice la propiedad abreviada padding con tres valores:
div {
padding: 25px 50px 75px;
}
Si la paddingpropiedad tiene dos valores:
- relleno: 25px 50px;
- los rellenos superior e inferior son 25px
- los rellenos derecho e izquierdo son 50px
Ejemplo
Utilice la propiedad abreviada padding con dos valores:
div {
padding: 25px 50px;
}
Si la paddingpropiedad tiene un valor:
- relleno: 25px;
- los cuatro rellenos son 25px
Ejemplo
Use la propiedad abreviada padding con un valor:
div {
padding: 25px;
}
Relleno y ancho del elemento
La propiedad CSS widthespecifica el ancho del área de contenido del elemento. El área de contenido es la porción dentro del relleno, el borde y el margen de un elemento ( el modelo de caja ).
Entonces, si un elemento tiene un ancho específico, el relleno agregado a ese elemento se agregará al ancho total del elemento. Esto es a menudo un resultado indeseable.
Ejemplo
Aquí, el elemento <div> tiene un ancho de 300px. Sin embargo, el ancho real del elemento <div> será de 350 px (300 px + 25 px de relleno izquierdo + 25 px de relleno derecho):
div {
width: 300px;
padding: 25px;
}
Para mantener el ancho en 300 px, sin importar la cantidad de relleno, puede usar la
box-sizingpropiedad. Esto hace que el elemento mantenga su ancho real; si aumenta el relleno, el espacio de contenido disponible disminuirá.
Ejemplo
Use la propiedad de tamaño de cuadro para mantener el ancho en 300 px, sin importar la cantidad de relleno:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Más ejemplos
Este ejemplo demuestra cómo establecer el relleno izquierdo de un elemento <p>.
Este ejemplo demuestra cómo establecer el relleno derecho de un elemento <p>.
Este ejemplo demuestra cómo establecer el relleno superior de un elemento <p>.
Este ejemplo demuestra cómo establecer el relleno inferior de un elemento <p>.
Todas las propiedades de relleno CSS
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |