La diferencia entre margin y padding en CSS está en dónde añaden espacio. padding separa el contenido del borde de su caja; margin establece espacio fuera del borde, respecto a otros elementos.
Si el texto está demasiado cerca del borde de una tarjeta, ajusta el padding. Si dos tarjetas se tocan, necesitas separación exterior, que puede venir de un margen o del gap del contenedor.
Ejemplo sencillo para ver la diferencia
<article class="tarjeta">
<h2>Tu próximo proyecto</h2>
<p>Una tarjeta con espacio interior y exterior.</p>
</article>
<style>
.tarjeta {
padding: 24px;
margin: 32px 16px;
border: 2px solid #2563eb;
border-radius: 12px;
background: #eef6ff;
}
.tarjeta h2 { margin-top: 0; }
.tarjeta p { margin-bottom: 0; }
</style>El fondo azul claro pinta el área interior, incluido el padding, pero no el margen. Ese detalle ayuda a localizar dónde se está creando un espacio en blanco.
Cómo leer uno, dos, tres o cuatro valores
.uno { padding: 20px; }
.dos { padding: 16px 24px; }
.tres { padding: 12px 24px 20px; }
.cuatro { padding: 10px 20px 30px 40px; }Un valor se aplica a los cuatro lados. Dos valores corresponden a vertical y horizontal. Tres indican arriba, lados y abajo. Cuatro siguen el orden superior, derecho, inferior e izquierdo. La misma lectura se aplica al shorthand margin.
También puedes usar propiedades lógicas como padding-inline y margin-block, que se adaptan al modo de escritura.
Por qué una caja mide más de lo que esperabas
Con box-sizing: content-box, un ancho de 300 píxeles se refiere al contenido. Si añades 20 píxeles de padding por lado y un borde de 2 por lado, la caja del borde alcanza 344 píxeles. El margen queda fuera de esa cuenta.
*, *::before, *::after { box-sizing: border-box; }
.tarjeta { width: 300px; max-width: 100%; padding: 20px; border: 2px solid; }Con border-box, el ancho declarado incluye padding y borde. El margen sigue sin incluirse. Esto facilita combinar tamaños y espacios sin desbordar el contenedor.
Por qué dos márgenes no siempre se suman
En el flujo de bloques, determinados márgenes verticales pueden colapsar. Dos márgenes positivos adyacentes de 20 y 30 píxeles pueden dejar 30, en lugar de 50. El fenómeno depende del contexto y también puede ocurrir entre padres e hijos.
Los márgenes entre elementos de un contenedor flex o grid no colapsan de esa manera. Para separar componentes en esos diseños, gap suele expresar mejor la intención.
Cómo investigar un espacio inesperado
- Selecciona el elemento en las herramientas del navegador.
- Revisa su modelo de caja y los estilos calculados.
- Comprueba márgenes predeterminados de títulos y párrafos.
- Revisa el padding del padre y el gap del contenedor.
Evita arreglar cada espacio con márgenes negativos: pueden esconder un problema de estructura y romper otros tamaños.
Preguntas frecuentes
¿Padding admite valores negativos?
No. Margin sí puede admitirlos, aunque requiere revisar qué elementos se solapan.
¿Margin auto centra siempre?
No. Depende del contexto de formato y del espacio disponible. Consulta cómo centrar un div para ver los casos adecuados.
Practica cambiando los valores con el inspector abierto y continúa en Aprender CSS.
Referencia técnica: documentación de MDN.
