padding

El padding es el espacio interior que existe entre el contenido de un elemento y su borde. Su función principal es crear “aire” dentro de la caja para que el contenido no quede pegado al límite visual del elemento. A diferencia del margin, el padding no es espacio vacío transparente: el background del elemento — color, imagen, gradiente — se extiende hasta cubrir el padding por completo, haciendo que forme parte de la superficie visual del elemento.

Esto tiene una implicancia directa en diseño: el padding agranda el área de color de fondo sin ampliar el espacio exterior del elemento. Un botón con padding: 12px 24px y background-color: azul tiene una superficie azul que incluye ese espacio interior — exactamente lo que se busca para que el texto no quede aplastado contra el borde. El margin haría lo mismo visualmente pero dejaría un área transparente, no coloreada.

El padding también forma parte del área interactiva. En elementos clicables como <a> o <button>, el padding amplía la zona que el usuario puede tocar o hacer clic. Más padding significa un blanco más grande para el cursor o el dedo — algo especialmente relevante para interfaces móviles, donde el área mínima tocable recomendada es de 44×44px.

Cómo funciona

El padding se interpone entre el área de contenido y el border. Cuando box-sizing: content-box (el default del navegador), el padding suma al tamaño total del elemento: un elemento con width: 200px y padding: 20px ocupa 240px en pantalla (200 + 20 de cada lado). Con box-sizing: border-box (el reset moderno), el padding se acomoda hacia adentro y el elemento sigue ocupando los 200px declarados, pero el área de contenido disponible se reduce.

Sintaxis

/* Un valor: los cuatro lados iguales */
padding: 16px;

/* Dos valores: arriba/abajo · izquierda/derecha */
padding: 8px 24px;

/* Tres valores: arriba · izquierda/derecha · abajo */
padding: 4px 16px 8px;

/* Cuatro valores: arriba · derecha · abajo · izquierda (sentido horario) */
padding: 4px 8px 12px 20px;

/* Lados individuales */
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;

Valores

Longitudes (px, em, rem, %)

El valor más común. Cualquier unidad de longitud válida en CSS funciona como valor de padding.

• px — valor fijo independiente del tamaño de fuente. Predecible y fácil de razonar.
• em — relativo al font-size del elemento. Útil cuando el padding debe escalar con el texto (ej. botones).
• rem — relativo al font-size de la raíz (html). Más predecible que em en componentes anidados.
• % — relativo al ancho del elemento contenedor, incluso para padding-top y padding-bottom. Esto último es el truco clásico para crear cajas de relación de aspecto fija (aunque hoy aspect-ratio lo resuelve mejor).

0 (valor por defecto)

Sin unidades. Elimina el padding en uno o todos los lados. Es el valor por defecto del navegador para todos los elementos (aunque algunos, como <ul>, tienen padding-left no nulo en el reset del navegador).

Lados individuales

Además del shorthand, cada lado tiene su propia propiedad:

Estas propiedades se pueden mezclar con el shorthand aprovechando el orden en cascada:

.tarjeta {
  padding: 24px;          /* los cuatro lados */
  padding-top: 32px;      /* sobreescribe solo arriba */
}

Regla de expansión del shorthand (1–4 valores)

El shorthand de padding sigue la misma lógica que margin y es consistente en toda la familia de propiedades de capas:

El orden de cuatro valores es sentido horario empezando desde arriba (Top → Right → Bottom → Left, nemotecnia: TRBL o “trouble”).

Ejemplo realista

Una tarjeta de producto con espaciado equilibrado: más padding horizontal que vertical para que el texto respire sin que la tarjeta crezca demasiado en altura.

.tarjeta {
  padding: 16px 24px;     /* 16px arriba/abajo, 24px izq/der */
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.boton-primario {
  padding: 12px 28px;
  background-color: #0d9488;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Cuándo usarlo

Usá padding cuando querés espacio dentro del elemento — para que el contenido no quede pegado al borde o al límite de la caja. Usá margin cuando querés espacio fuera del elemento, separándolo de sus vecinos.

Notas, gotchas e interacción

• El padding no acepta valores negativos. padding: -8px es inválido — el mínimo es 0. A diferencia del margin, no existe el “padding negativo”. Si necesitás tirar contenido hacia afuera de la caja, usá margin negativo o transform: translate.
• % en padding-top y padding-bottom referencia el ancho del contenedor, no el alto. Esto sorprende: padding-top: 50% no es “la mitad del alto” sino “la mitad del ancho del contenedor”. Es útil para trucos de aspecto ratio pero fácil de malinterpretar.
• Interacción con box-sizing: con content-box, agregar padding agranda el elemento. Con border-box, el padding se descuenta del contenido interior y el elemento mantiene su width/height declarados. Cicatriz del sandbox de este sitio: el sandbox inyecta *{box-sizing:border-box} automáticamente (docs/CICATRICES.md A.1.7), por lo que en los ejercicios el padding nunca agranda el tamaño total.
• El padding forma parte del área de clic en elementos interactivos. Si el padding es demasiado chico en un <button> o <a>, el área clicable queda pequeña — especialmente problemático en táctil. El mínimo recomendado es ~44px en la dimensión más chica.
• padding no es heredado. Cada elemento establece su propio padding; los hijos no heredan el del padre.

Vigente / legacy

No hay forma legacy. padding y sus propiedades individuales (padding-top, etc.) son parte del CSS desde las primeras versiones y no tienen alternativa obsoleta. Los prefijos de vendor nunca fueron necesarios para esta propiedad.