Márgenes y Padding

Márgenes y padding son tus mejores amigos para crear espacios en tu diseño. Aunque parecen similares, tienen diferencias cruciales. Dominarlos te hará un diseñador web mucho mejor.

1. Diferencia Entre Margin y Padding

Esta es la diferencia más importante que debes entender:

/* Ejemplo visual */
div {
  background-color: lightblue;
  padding: 20px; /* Espacio DENTRO (azul claro) */
  margin: 20px; /* Espacio FUERA (transparente) */
}

2. Sintaxis de Padding

Hay varias formas de especificar padding. Elige la que prefieras.

/* Un valor: todos los lados */
div {
  padding: 20px;
  /* arriba: 20px, derecha: 20px, abajo: 20px, izquierda: 20px */
}

/* Dos valores: vertical, horizontal */
div {
  padding: 10px 20px;
  /* arriba/abajo: 10px, izquierda/derecha: 20px */
}

/* Tres valores: arriba, horizontal, abajo */
div {
  padding: 10px 20px 15px;
  /* arriba: 10px, izquierda/derecha: 20px, abajo: 15px */
}

/* Cuatro valores: arriba, derecha, abajo, izquierda (clockwise) */
div {
  padding: 10px 20px 15px 5px;
}

/* Especificar cada lado */
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 5px;
}

3. Sintaxis de Margin

Margin usa exactamente la misma sintaxis que padding.

/* Un valor: todos los lados */
div {
  margin: 20px;
}

/* Dos valores: vertical, horizontal */
div {
  margin: 10px 20px;
}

/* Tres valores: arriba, horizontal, abajo */
div {
  margin: 10px 20px 15px;
}

/* Cuatro valores: arriba, derecha, abajo, izquierda */
div {
  margin: 10px 20px 15px 5px;
}

/* Especificar cada lado */
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 5px;
}

4. Casos de Uso Comunes

Aquí hay patrones que usarás constantemente:

div {
  width: 300px;
  margin: 0 auto; /* 0 arriba/abajo, auto izquierda/derecha */
}

button {
  padding: 10px 20px; /* Espacio dentro del botón */
  margin: 5px; /* Distancia entre botones */
}

p {
  padding: 15px; /* Espacio dentro del párrafo */
  margin-bottom: 20px; /* Distancia con el siguiente elemento */
}

.card {
  padding: 20px; /* Espacio dentro */
  margin: 10px; /* Distancia entre tarjetas */
  border: 1px solid #ccc;
  border-radius: 8px;
}

5. Margin Collapse (Colapso de Márgenes)

Cuando dos márgenes se tocan verticalmente, se fusionan en el mayor de los dos.

div {
  margin-bottom: 20px;
}

p {
  margin-top: 30px;
}

/* El espacio entre div y p es 30px, NO 50px */
/* Se colapsa al valor mayor */

6. Reset de Márgenes y Padding

Los navegadores aplican márgenes y padding por defecto. A menudo los reseteas.

/* Reset global */
* {
  margin: 0;
  padding: 0;
}

/* O más específico */
body, h1, h2, p, ul {
  margin: 0;
  padding: 0;
}

7. Unidades Comunes

Puedes usar diferentes unidades para márgenes y padding:

div {
  padding: 20px; /* Píxeles (fijo) */
  margin: 2em; /* Em (relativo al tamaño de fuente) */
}

div {
  padding: 5%; /* Porcentaje (relativo al padre) */
  margin: 1rem; /* Rem (relativo a la raíz) */
}