Propiedad CSS padding-bottom
Aprende cómo la propiedad CSS padding-bottom agrega espacio entre el contenido de un elemento y su borde inferior, con valores, ejemplos y consideraciones.
La propiedad padding-bottom establece la cantidad de espacio entre el contenido de un elemento y su borde inferior. Controla el espaciado interno solo en el lado inferior y es una de las cuatro propiedades de relleno individuales junto con padding-top, padding-left y padding-right.
Comprender padding-bottom es útil cuando necesitas un espacio vertical preciso debajo del texto u otro contenido, sin afectar a los elementos circundantes como lo haría margin-bottom.
Los valores negativos no están permitidos para padding-bottom. El valor mínimo es 0.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos excepto aquellos con display establecido en table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column. También se aplica a ::first-letter. |
| Heredado | No |
| Animable | Sí |
| Versión | CSS1 |
| Sintaxis DOM | element.style.paddingBottom = "5%"; |
Sintaxis
padding-bottom: <length> | <percentage> | initial | inherit;La propiedad acepta un único valor. Usar la abreviatura padding con cuatro valores es equivalente, pero establece los cuatro lados a la vez.
Valores
| Valor | Descripción |
|---|---|
<length> | Un relleno inferior fijo expresado en cualquier unidad de longitud CSS (px, em, rem, pt, cm, etc.). El valor inicial es 0. |
<percentage> | Relleno inferior como porcentaje del ancho (no la altura) del bloque contenedor. Esto sorprende a muchos desarrolladores: consulta la nota a continuación. |
initial | Restablece la propiedad a su valor predeterminado (0). |
inherit | Toma el valor calculado del elemento padre. |
Los valores de porcentaje son relativos al ancho del bloque contenedor, no a su altura. Esto es válido para los cuatro lados del relleno y está definido por la especificación CSS. Significa que padding-bottom: 50% crea una altura igual a la mitad del ancho del contenedor, una técnica utilizada para crear cajas con relación de aspecto antes de que existiera la propiedad aspect-ratio.
Cómo padding-bottom afecta al diseño
padding-bottom aumenta la altura total del elemento. El cálculo exacto depende del valor de box-sizing en efecto:
content-box(predeterminado):altura total = height + padding-top + padding-bottom + border-top + border-bottom. El valor depadding-bottomse suma a laheightespecificada.border-box: laheightespecificada incluye el relleno y el borde. Agregarpadding-bottomreduce el área de contenido en lugar de agrandar el elemento.
Ejemplos
Valor en píxeles básico
El uso más común: un número fijo de píxeles debajo del contenido:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with px</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>padding-bottom: 40px</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valor de longitud en centímetros
Cualquier unidad de longitud CSS funciona. Aquí se usa 2cm, lo cual es útil para hojas de estilo de impresión:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with cm</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>padding-bottom: 2cm</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valor en porcentaje
padding-bottom: 25% agrega un relleno inferior igual al 25% del ancho del bloque contenedor. Este ejemplo lo usa para crear una tarjeta visual simple con espaciado proporcional:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with %</title>
<style>
.card {
width: 300px;
border: 2px solid #1c87c9;
background: #e8f4fd;
padding-bottom: 25%; /* = 75px (25% of 300px) */
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
</style>
</head>
<body>
<div class="card">
<strong>Card title</strong>
<p>The bottom padding equals 25% of the card's width.</p>
</div>
</body>
</html>Uso de em para espaciado escalable
El relleno basado en em escala con el tamaño de fuente del elemento, lo que mantiene las proporciones intactas cuando cambia el tamaño de fuente:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with em</title>
<style>
.note {
font-size: 18px;
border-left: 4px solid #1c87c9;
padding-left: 12px;
padding-bottom: 1em; /* = 18px, matches font-size */
background: #f0f8ff;
}
</style>
</head>
<body>
<div class="note">
This note box uses <code>padding-bottom: 1em</code>. If you increase
the font size, the bottom padding grows proportionally.
</div>
</body>
</html>Comparación de box-sizing
Los mismos height y padding-bottom se comportan de manera diferente con content-box vs border-box:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom and box-sizing</title>
<style>
.box {
width: 220px;
height: 80px;
padding-bottom: 40px;
border: 2px solid #333;
background: #d0e8ff;
margin-bottom: 12px;
color: #111;
font-size: 14px;
}
.content-box { box-sizing: content-box; } /* total height = 80+40+4 = 124px */
.border-box { box-sizing: border-box; } /* total height stays 80px */
</style>
</head>
<body>
<div class="box content-box">content-box — total height: 124px</div>
<div class="box border-box">border-box — total height: 80px</div>
</body>
</html>Propiedades relacionadas
padding— abreviatura que establece los cuatro lados a la vez.padding-top— espacio encima del contenido.padding-left— espacio a la izquierda del contenido.padding-right— espacio a la derecha del contenido.margin-bottom— espacio exterior debajo del borde del elemento (exterior, no interior).box-sizing— controla si el relleno se incluye en elwidth/heightdeclarado.height— la altura del área de contenido, afectada porpadding-bottomen el modocontent-box.