Modelo de caja (box model) explicado con ejemplos

El modelo de caja es uno de los conceptos fundamentales de CSS que todo desarrollador web debe dominar. Este artículo explica en detalle cómo funciona y cómo afecta al diseño de tus páginas web, con ejemplos prácticos.

Ir directamente al contenido

Modelo de caja (box model) explicado con ejemplos

Diagrama del modelo de caja mostrando contenido, padding, border y margin

Componentes del modelo de caja

Todo elemento en HTML es una caja rectangular compuesta por:

Contenido

El área del contenido real (texto, imagen, etc.)

Padding

Espacio interno entre el contenido y el borde

Border

Línea que rodea el padding y contenido

Margin

Espacio externo que separa el elemento de otros

.caja {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid #3498db;
  margin: 30px;
  background-color: #f1c40f;
}

Diagrama detallado del modelo de caja CSS

La propiedad box-sizing

Controla cómo se calcula el ancho y alto total de un elemento:

/* Por defecto (content-box) */
.content-box {
  box-sizing: content-box; /* width/height solo aplican al contenido */
  width: 300px;
  padding: 20px; /* Ancho total = 300 + 40 (padding) + bordes */
}

/* Modelo alternativo (border-box) */
.border-box {
  box-sizing: border-box; /* width/height incluyen padding y border */
  width: 300px; /* Ancho total = 300 (incluye padding y border) */
  padding: 20px;
}

Usar box-sizing: border-box facilita el cálculo de dimensiones y es considerado una buena práctica.

Ejemplos prácticos

Casos comunes donde entender el modelo de caja es esencial:

/* Centrar un elemento horizontalmente */
.centrado {
  width: 80%;
  margin: 0 auto; /* Margen automático en ambos lados */
}

/* Espaciado entre elementos */
.card {
  margin-bottom: 20px; /* Separación vertical entre cards */
}

/* Botones con buen padding */
.boton {
  padding: 12px 24px; /* Espaciado interno cómodo */
  border: 2px solid transparent;
}