Propiedad CSS padding
Aprende cómo la propiedad CSS padding añade espacio dentro del borde de un elemento. Cubre la sintaxis abreviada, reglas de uno a cuatro valores y más.
La propiedad padding añade espacio entre el contenido de un elemento y su borde. A diferencia de margin, que separa los elementos desde el exterior, el padding actúa por dentro — amplía el área clicable o visible del elemento manteniendo el borde en su lugar.
Los valores de padding se establecen usando longitudes o porcentajes, y siempre son no negativos.
No se permiten valores negativos para el padding. Usa un margin negativo si necesitas desplazar el contenido hacia adentro.
padding es una propiedad abreviada que establece los cuatro lados a la vez. También puedes controlar cada lado de forma individual:
Cómo encaja el padding en el modelo de caja
Cada elemento HTML está envuelto en el modelo de caja de CSS: contenido → padding → borde → margen, de adentro hacia afuera. El padding se sitúa entre el área de contenido y el borde, por lo que forma parte de la región de fondo del elemento.
Cuando estableces box-sizing: border-box (el valor predeterminado moderno en la mayoría de los resets), el padding se incluye en el width y height declarados. Con el antiguo box-sizing: content-box, el padding se añade encima de esas dimensiones. Consulta box-sizing para más detalles.
Referencia de la propiedad
| Valor inicial | 0 |
| Se aplica a | Todos los elementos excepto table-row-group, table-header-group, table-footer-group, table-row, table-column-group y table-column. También se aplica a ::first-letter. |
| Heredada | No |
| Animable | Sí |
| Versión | CSS1 |
| Sintaxis DOM | element.style.padding = "30px" |
Sintaxis
padding: <length> | <percentage> | initial | inherit;Regla de uno a cuatro valores
La propiedad abreviada acepta uno, dos, tres o cuatro valores separados por espacios. La asignación sigue el orden de las agujas del reloj: arriba → derecha → abajo → izquierda.
| Valores dados | Arriba | Derecha | Abajo | Izquierda |
|---|---|---|---|---|
padding: 20px | 20px | 20px | 20px | 20px |
padding: 20px 40px | 20px | 40px | 20px | 40px |
padding: 10px 20px 30px | 10px | 20px | 30px | 20px |
padding: 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
Un truco útil para recordarlo: los valores omitidos reflejan el lado opuesto (izquierda refleja derecha; abajo refleja arriba).
Ejemplos
Cuatro valores (arriba / derecha / abajo / izquierda)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>El párrafo recibe 15 px arriba, 30 px a la derecha, 20 px abajo y 40 px a la izquierda.
Valores en porcentaje
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Los valores de padding en porcentaje — incluyendo padding-top y padding-bottom — siempre se calculan en relación con el ancho del bloque contenedor, no con su altura. Esto facilita la creación de cajas con relación de aspecto: un bloque con padding-top: 56.25% mantiene una proporción 16:9 independientemente de su ancho.
Dos valores (vertical / horizontal)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>padding: 20px 40px establece 20 px arriba y abajo, 40 px a la izquierda y derecha — una forma compacta de aplicar espaciado simétrico.
Valores
| Valor | Descripción |
|---|---|
length | Un tamaño fijo en cualquier unidad de longitud CSS: px, em, rem, pt, cm, etc. El valor por defecto es 0. |
% | Un porcentaje del ancho del bloque contenedor (se aplica a los cuatro lados). |
initial | Restablece la propiedad a su valor predeterminado (0). |
inherit | Hereda el valor calculado del elemento padre. |
Propiedades lógicas (con escritura direccional)
Para maquetaciones internacionalizadas que admiten texto vertical o de derecha a izquierda, los lados físicos padding-top/right/bottom/left pueden resultar inadecuados. CSS ofrece propiedades lógicas que respetan la dirección de escritura:
| Propiedad lógica | Equivale a en horizontal LTR |
|---|---|
padding-block-start | padding-top |
padding-block-end | padding-bottom |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
Los equivalentes abreviados son padding-block y padding-inline.
/* Equivalent to padding-top + padding-bottom */
padding-block: 16px;
/* Equivalent to padding-left + padding-right */
padding-inline: 24px;Estos están soportados en todos los navegadores modernos y son preferidos en las bibliotecas de componentes que admiten texto bidireccional.
Casos de uso frecuentes y advertencias
Área clicable. Como el padding forma parte del fondo del elemento y de la región de captura de eventos, aumentarlo en un botón o enlace amplía el área de toque — una ventaja directa para la usabilidad en móviles.
Padding en elementos en línea. El padding horizontal en elementos en línea (como <span>) funciona como se espera. El padding vertical se aplica visualmente, pero no desplaza las líneas circundantes; usa un elemento de bloque o inline-block si necesitas ritmo vertical.
Padding vs. margin. Usa padding cuando quieras que el color de fondo o el borde cubra el espacio extra. Usa margin cuando el espacio deba ser transparente y estar fuera del borde.
Interacción con box-sizing. Con content-box, añadir padding hace que el elemento sea visualmente más grande. Con border-box, el padding se absorbe dentro del ancho declarado, manteniendo la maquetación predecible. Consulta box-sizing.
Tablas. La propiedad abreviada padding no tiene efecto en las filas de tabla ni en los grupos de columnas. Usa padding en las celdas <td> y <th>, o utiliza border-spacing para los espacios entre celdas.