Cargando...

Margin CSS

Pintas una caja, dibujas su borde y redondeas esquinas. Siguiente habilidad: separar las cajas. margin es el hueco exterior alrededor del elemento — el aire fuera del borde.

¿Qué es margin?

El margen es espacio vacío alrededor del exterior del borde del elemento. Separa una caja de sus vecinas. No pinta el fondo del elemento en ese hueco — el hueco queda fuera del área rellena.

Margin frente a padding (contraste rápido)

Padding (siguiente lección) está dentro del borde — entre contenido y borde. Margin está fuera del borde — entre esta caja y la siguiente. Si hoy recuerdas una línea: margin = exterior, padding = interior.

Atajo: ¿cuántos valores?

Puedes pasar una, dos, tres o cuatro longitudes. El orden de los lados es fijo.

📊 Cantidad de valores del atajo margin

Valores Significado Nota diaria
1 Los cuatro lados iguales Aire uniforme alrededor de una tarjeta
2 Arriba+abajo, luego izquierda+derecha Pares vertical y horizontal
3 Arriba, izquierda+derecha, abajo Menos común — conoce que existe
4 Arriba, derecha, abajo, izquierda Control total, horario desde arriba

Mismo espacio en cada lado

Empieza con una longitud para todos los lados.

Mismo margin en todos los lados

css
CSS Code 
.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Dos valores — vertical, luego horizontal

Dos longitudes emparejan lados opuestos: primero arriba y abajo; después izquierda y derecha.

Margin vertical luego horizontal

css
CSS Code 
.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}

Cuatro valores — horario desde arriba

Cuando cada lado necesita su hueco: arriba → derecha → abajo → izquierda.

Atajo margin de cuatro lados

css
CSS Code 
.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}

Centrar un bloque con auto

Para una caja de bloque con ancho fijado, margin-left: auto y margin-right: auto (a menudo margin: 0 auto) reparte el espacio sobrante a ambos lados — forma clásica de centrar horizontalmente.

Centrado horizontal con auto

css
CSS Code 
.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Los márgenes verticales pueden colapsar

Cuando dos elementos de bloque se apilan, el margin inferior del primero y el superior del segundo a menudo colapsan en un solo hueco — suele ser el mayor de los dos, no su suma. Sorprende a principiantes; espéralo entre párrafos y secciones apiladas.

Bloques apilados con colapso de margin

css
CSS Code 
.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}

.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* Entre ellos a menudo ves unos 24px, no 48px */

Un lado a la vez

Las formas largas como margin-top son perfectas cuando solo necesitas espacio sobre un título o bajo un botón.

Solo margin superior

css
CSS Code 
.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}

Pruébalo tú

  1. Da a dos tarjetas margin: 16px y observa el hueco exterior.
  2. Reescribe una como margin: 24px 12px y nota vertical frente a horizontal.
  3. Centra una caja de 280px con margin: 0 auto.
  4. Apila dos bloques de color con margin-bottom y margin-top ambos a 24px — ¿el hueco parece 24 o 48?
  5. Separa un título solo con margin-top.

Errores comunes

  • Usar margin cuando querías padding (cojín interior para el texto)
  • Esperar que margin: auto centre cada ítem flex/grid como un bloque simple (el contexto de layout importa)
  • Sumar margins superior e inferior asumiendo que siempre se añaden (el colapso puede reducir el hueco)
  • Márgenes enormes en todas partes en vez de una escala pequeña y coherente
  • Confundir el orden de cuatro valores (arriba, derecha, abajo, izquierda)

Resumen

  • Margin es espacio exterior fuera del borde
  • Atajo: 1, 2 o 4 valores (cuatro en horario desde arriba)
  • margin: 0 auto centra un bloque con ancho de forma horizontal
  • Los márgenes verticales entre bloques apilados pueden colapsar
  • Usa formas largas cuando solo un lado necesita espacio
  • Padding es el primo interior — siguiente lección

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
9
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 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
Tema 1 de 1
Css Tutorial