Modelo de caja CSS

En CSS, todo elemento HTML se representa como una caja rectangular. El Box Model describe cómo se calcula el tamaño total de esas cajas, teniendo en cuenta el contenido, el padding, el borde y el margen.

Entender el Modelo de Caja es fundamental para diseñar y alinear correctamente los elementos de una página web.

Componentes del Modelo de Caja

Un elemento HTML está compuesto por 4 áreas principales:

• Content (Contenido): Es el área donde se muestra el texto, las imágenes u otros elementos.
• Padding: Es el espacio entre el contenido y el borde.
• Border: Es el borde que rodea el padding y el contenido.
• Margin: Es el espacio externo alrededor del borde. No forma parte de la caja, pero influye en la separación entre elementos.

Visualización del Modelo de Caja

+----------------------------+
|         Margin             |  <- Espacio externo
|   +--------------------+   |
|   |     Border         |   |  <- Borde del elemento
|   |  +-------------+   |   |
|   |  |  Padding    |   |   |  <- Espacio interno
|   |  |  Content    |   |   |  <- Área del contenido
|   |  +-------------+   |   |
|   +--------------------+   |
+----------------------------+

Tipos de visualización (display)

En CSS, el tipo de visualización de un elemento determina cómo se comporta dentro del flujo del documento.

• display: block

  El elemento ocupa todo el ancho disponible. Comienza en una nueva línea y puede tener width, height, margin, padding, etc.

  Ejemplos comunes: <div>, <section>, <p>

• display: inline

  El elemento se mantiene en la misma línea, ocupando solo el espacio que necesita su contenido.

  No acepta width ni height.

  Ejemplos comunes: <span>, <a>, <strong>

• display: inline-block

  Similar a inline, pero permite definir width, height, margin y padding.

  Muy útil cuando se necesita alineación en línea pero con control sobre la caja.

<div style="background: lightblue; display: block;">
  This is block
</div>

<span style="background: lightgreen; display: inline;">
  This is inline
</span>

<span style="background: lightcoral; display: inline-block; width: 150px; height: 50px;">
  This is inline-block
</span>

Margin y Padding

Ambas son propiedades fundamentales del Modelo de Caja en CSS. Ayudan a definir el espaciado dentro y fuera de los elementos.

• padding
  • Es el espacio interno entre el contenido y el borde del elemento.
  • En content-box, este padding se suma al tamaño total. En border-box, está incluido en el tamaño declarado.
• margin
  • Es el espacio externo, fuera del borde, que separa un elemento de otros elementos.
  • Las márgenes verticales pueden colapsar si hay elementos adyacentes.

<div style="background: lightgray; padding: 20px; margin: 30px;">
  Box with padding and margin
</div>

Box Model por defecto: content-box

Por defecto, el tamaño de una caja en CSS se calcula usando box-sizing: content-box. Esto significa que el ancho y alto especificados solo aplican al contenido. El padding y el borde se suman al tamaño total.

Ejemplo de content-box:

<div class="box">Hello, Box Model!</div>

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
}

• Ancho total = 200px (content) + 20px (padding izquierdo) + 20px (padding derecho) + 10px (borde izquierdo) + 10px (borde derecho) = 260px.
• Alto total = 100px + 20px + 20px + 10px + 10px = 160px.

La solución: box-sizing: border-box

El valor box-sizing: border-box simplifica el cálculo del tamaño de las cajas. Con border-box, el padding y el borde se incluyen dentro del ancho y alto especificados.

Ejemplo con border-box:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: border-box;
}

Ahora el tamaño total de la caja no cambia:

• El ancho total sigue siendo 200px (el padding y el borde se "restan" del contenido).
• El alto total sigue siendo 100px.

Por qué border-box es interesante:

• Facilita el diseño de interfaces: ya no necesitas ajustar manualmente el tamaño para compensar el padding y el borde.
• Evita errores comunes al trabajar con dimensiones fijas.
• Es más intuitivo y ampliamente recomendado para proyectos modernos.

Consejo: Utiliza box-sizing: border-box como valor global al inicio de tus proyectos:

* {
  box-sizing: border-box;
}

¿Qué es el colapso de márgenes?

Cuando dos elementos tienen márgenes verticales adyacentes (por ejemplo, el margen inferior de uno y el margen superior del siguiente), se combinan en lugar de sumarse. Esto se llama colapso de márgenes.

Ejemplo de colapso de márgenes:

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

En lugar de sumar 20px + 30px, el margen total será 30px, el mayor de los dos.

Herramientas para visualizar el Box Model

Los navegadores modernos incluyen herramientas que facilitan la inspección del Box Model. Por ejemplo:

• En Chrome DevTools (que comenzaremos a estudiar pronto), selecciona un elemento y ve a la pestaña Styles para visualizar las dimensiones, padding, borde y márgenes de cualquier caja.
• Aquí verás el Box Model representado de manera gráfica.

Resumen del Modelo de Caja

• El Box Model define cómo se calcula el tamaño de un elemento HTML.
• box-sizing: content-box es el valor por defecto, pero box-sizing: border-box es más práctico y se recomienda utilizarlo globalmente.
• El colapso de márgenes ocurre cuando los márgenes verticales de dos elementos adyacentes se combinan.
• display: block hace que el elemento ocupe toda la línea disponible, forzando un salto de línea.
• display: inline mantiene al elemento en línea con otros, pero no permite modificar su ancho ni alto.
• display: inline-block combina lo mejor de ambos: permite estar en línea y ajustar tamaño con width y height.
• margin define el espacio externo alrededor del elemento, separándolo de otros.
• padding define el espacio interno entre el contenido del elemento y su borde.

Enlaces útiles

• MDN: Modelo de Caja
• MDN: Propiedad box-sizing
• MDN: Colapso de márgenes