Propiedad CSS padding-bottom
La propiedad padding-bottom establece el espacio de relleno en la parte inferior de un elemento. Define el espacio entre el contenido del elemento y su borde inferior.
El relleno del elemento contribuye al cálculo de la altura de un elemento. Específicamente, padding-bottom aumenta la altura total añadiendo espacio debajo del contenido. Si utilizas el valor “border-box” de la propiedad box-sizing, el cálculo de la altura total cambia para que el relleno se incluya dentro de la altura especificada.
INFO
Los valores negativos no son válidos.
INFO
Esta propiedad no tiene ningún efecto en los elementos en línea, como <span>.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. Se hace una excepción cuando la propiedad display está configurada como table-row-group, table-header-group, table-footer-group, table-row, table-column-group y table-column. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | Sí. El espacio de relleno es animable. |
| Versión | CSS1 |
| Sintaxis DOM | element.style.paddingBottom = "5%"; |
Sintaxis
Sintaxis de la propiedad CSS padding-bottom
padding-bottom: length | % | initial | inherit;Ejemplo de la propiedad padding-bottom:
Ejemplo de la propiedad CSS padding-bottom con valor en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Ejemplo de la propiedad padding-bottom con el valor "length":
Ejemplo de la propiedad CSS padding-bottom con valor en cm
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>Padding-bottom property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| length | Establece el relleno inferior en px, pt, cm, etc. Su valor inicial es 0. | Probarlo » |
| % | Establece el relleno inferior en porcentaje del ancho del bloque contenedor. | Probarlo » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es el propósito de la propiedad 'padding-bottom' en CSS?