Padding CSS
El margin separa las cajas. A menudo también necesitas espacio dentro de la caja — para que el texto no se pegue al borde y los botones se toquen fácil. Ese cojín interior es padding.
¿Qué es padding?
Padding es espacio vacío entre el contenido de un elemento y su borde. Vive dentro del borde. Más padding aleja el contenido de los bordes y la caja suele crecer (salvo que cambies box-sizing después).
Padding vs margin de un vistazo
Son fáciles de confundir. Mantén los trabajos separados.
📊 Padding vs margin
| Herramienta | Dónde se sitúa | Trabajo diario |
|---|---|---|
padding |
Dentro del borde | Amortiguar texto, agrandar área clicable |
margin |
Fuera del borde | Separar esta caja de las vecinas |
| Fondo | Suele llenar el padding | Color/imagen suele cubrir el cojín |
| Colapso vertical | El padding no colapsa | Los márgenes de bloques apilados pueden |
Mismo padding en cada lado
Empieza con una longitud para una tarjeta tranquila.
Mismo padding en todos los lados
css.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* hueco exterior — otra herramienta */
}Qué debes notar
El texto se aleja del borde gris. El fondo blanco también llena la zona de padding — no solo las letras.
Dos valores — vertical, luego horizontal
Dos longitudes emparejan lados opuestos: primero arriba y abajo; después izquierda y derecha.
Padding vertical luego horizontal
css.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}Cuatro valores — horario desde arriba
Cuando cada lado necesita su cojín: arriba → derecha → abajo → izquierda.
Atajo padding de cuatro lados
css.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}Los botones aman el padding
El padding agranda el área cómoda de toque sin cambiar el tamaño del texto de la etiqueta. Una etiqueta corta con padding generoso se siente moderna y fácil de clicar.
Botón con padding
css.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}El fondo llena el padding
A diferencia del margin (fuera), el padding sigue siendo parte de la caja pintada del elemento. Un color o imagen de fondo suele cubrir la zona de padding.
Zona de padding coloreada
css.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}Pruébalo tú
- Tarjeta con
padding: 16pxy borde visible — el texto no pegado al borde. - Reescríbela como
padding: 20px 12pxy nota cojín más alto vs más ancho. - Botón con más padding horizontal que vertical.
- Banner teal con padding grande y borde más oscuro — el color llena el cojín.
- Dos tarjetas solo con
marginentre ellas, luego solopaddingdentro de una — siente los trabajos distintos.
Errores comunes
- Usar padding para separar cajas (eso es trabajo del margin)
- Esperar que los paddings entre hermanos colapsen como márgenes verticales (no lo hacen)
- Olvidar que el fondo suele pintar a través de la zona de padding
- Padding enorme en cada lado cuando una escala modesta se lee mejor
- Confundir el orden de cuatro valores (arriba, derecha, abajo, izquierda)
Resumen
- Padding es espacio interior entre contenido y borde
- Atajo: 1, 2 o 4 valores (cuatro en horario desde arriba)
- El fondo suele llenar la zona de padding
- El padding no colapsa como pueden los márgenes verticales
- Botones y tarjetas dependen del padding para comodidad
- Margin sigue siendo el primo exterior — mantén ambas herramientas afiladas
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior