Modelo de Caja y Layout

Entendiendo el Modelo de Caja CSS

Cada elemento en CSS se representa como una caja rectangular. El modelo de caja describe cómo se calcula el tamaño de cada elemento y cómo los elementos interactúan entre sí. Entender esto es fundamental para dominar el layout CSS.

Cada caja consiste en cuatro áreas distintas, de adentro hacia afuera:

1. Contenido: El texto, imágenes u otro contenido real
2. Relleno (Padding): Espacio libre alrededor del contenido, dentro del borde
3. Borde: Una línea que envuelve el relleno y contenido
4. Margen: Espacio libre alrededor del borde, separando de otros elementos

Diagrama Visual del Modelo de Caja

Box Sizing: El Cambio de Juego

Por defecto, cuando estableces width: 200px, solo estás estableciendo el ancho del contenido. El relleno y borde se agregan encima de ese ancho, haciendo el tamaño total impredecible. Esto se llama content-box.

box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px;
/* Ancho total: 250px */

box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px;
/* Ancho total: 200px */

*, *::before, *::after {
  box-sizing: border-box;
}

La Propiedad Display

La propiedad display determina cómo se comporta un elemento en el flujo del layout. Es una de las propiedades CSS más importantes.

div, p, h1-h6, section {
  display: block;
}

span, a, strong, em {
  display: inline;
}

.button {
  display: inline-block;
  width: 120px;
  height: 40px;
}

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

Margen y Relleno

El margen crea espacio fuera de los elementos (entre elementos), mientras que el relleno crea espacio dentro de los elementos (entre el contenido y el borde).

/* Un valor - todos los lados */
margin: 20px;

/* Dos valores - vertical | horizontal */
margin: 10px 20px;

/* Tres valores - arriba | horizontal | abajo */
margin: 10px 20px 30px;

/* Cuatro valores - arriba derecha abajo izquierda (sentido horario) */
margin: 10px 20px 30px 40px;

/* Lados individuales */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

.centered {
  width: 600px;
  margin: 0 auto;  /* Arriba/abajo 0, izq/der auto */
}

Colapso de Márgenes

Uno de los comportamientos más confusos de CSS: Cuando dos márgenes verticales se encuentran, no se suman—colapsan al mayor de los dos. Esto SOLO ocurre con márgenes verticales (arriba/abajo), nunca horizontales (izq/der).

/* Método 1: Usar flexbox o grid */
.container {
  display: flex;
  flex-direction: column;
}

/* Método 2: Agregar borde o padding */
.container {
  padding: 1px;
}

/* Método 3: Crear nuevo contexto de formato de bloque */
.container {
  overflow: hidden;
}