Modelo de Caja en CSS

El modelo de caja de CSS es uno de los conceptos más básicos en diseño web. Define cómo se compone cada elemento HTML: contenido, padding, borde y margen forman la caja alrededor del elemento.

Elementos del modelo de caja

El modelo de caja tiene cuatro partes principales: contenido (content), relleno (padding), borde (border) y margen (margin). Estos definen el tamaño y posición total del elemento.

En este ejemplo, un elemento <div> aparece con configuraciones de padding, border y margin:

Ejemplos visuales del modelo de caja

Los siguientes ejemplos muestran cómo los valores de padding, border y margin cambian la apariencia del elemento.

Uso de box-sizing

Por defecto, el ancho y alto solo aplican al contenido, y el padding y border se suman. Con <box-sizing: border-box;>, padding y border se incluyen en las dimensiones establecidas.

div {
  width: 200px;
  padding: 20px;
  padding: 5px solid black;
  margin: 10px;
}

Consejos para usar el modelo de caja

El uso correcto del modelo de caja es esencial para un diseño preciso. Aquí algunos consejos:

• Usa <box-sizing: border-box;> para obtener medidas más predecibles.
• Deja suficiente margen entre elementos para mejorar la legibilidad.
• Experimenta con distintos valores de padding y border para lograr un diseño equilibrado.