Docs ejecutables de CSS: Modelo de caja

Q: ¿Qué hace box-sizing: border-box?

Hace que width y height incluyan el padding y el borde. Una caja con width: 200px, padding: 20px y un borde de 5px mide entonces exactamente 200px de ancho, y el área de contenido se reduce a 150px para caber. El valor por defecto, content-box, suma el padding y el borde por encima, lo que da 250px.

Q: ¿Cómo se calcula el ancho total de un elemento?

Con el content-box por defecto: width + padding izquierdo y derecho + borde izquierdo y derecho. Con border-box: solo width. El margin queda fuera de la caja en ambos casos, así que suma al espacio que ocupa el elemento, no a su propio ancho.

Q: ¿Debo poner box-sizing: border-box en todo?

La mayoría de los proyectos lo hacen, con , ::before, *::after { box-sizing: border-box; } al principio de la hoja de estilo. Hace que los anchos en porcentaje y el padding sumen como se espera, y frameworks como Bootstrap y Tailwind incluyen el mismo reset.

Las cuatro capas de cada caja

Cada elemento de una página se dibuja como un rectángulo hecho de cuatro capas, de adentro hacia afuera:

Contenido: el texto, la imagen o los elementos hijos, con el tamaño que dan width y height.
Padding: espacio dentro de la caja, entre el contenido y el borde. Muestra el fondo del elemento.
Borde: la línea alrededor del padding.
Margin: espacio fuera del borde que aleja otras cajas. Siempre es transparente.

En el ejemplo cada capa tiene su propio color: contenido azul, padding verde, un borde oscuro y una zona ámbar alrededor de la caja que es el margin (la dibuja un contenedor, porque el margin en sí es transparente).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

La línea debajo de la caja la mide el navegador: 160 + 20 + 20 + 10 + 10 = 220px. El margin suma otros 24px a cada lado, pero está fuera de la caja, así que no forma parte de los 220.

Cálculo del ancho: content-box vs border-box

Por defecto (box-sizing: content-box), width define solo el contenido. El padding y el borde se suman por encima, así que la caja termina más ancha que el número que escribiste. Con box-sizing: border-box, width es la caja entera y el contenido se reduce para dejar sitio al padding y al borde.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (por defecto)	`border-box`
`width` significa	El contenido	Contenido + padding + borde
`width: 200px; padding: 20px; border: 5px`	250px de ancho	200px de ancho
Área de contenido en ese caso	200px	150px
Margin	Fuera, no cuenta	Fuera, no cuenta

El reset de border-box

Como border-box hace que los tamaños cuadren, casi todas las hojas de estilo modernas empiezan con esta regla:

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

Importa sobre todo con porcentajes. Dos columnas con width: 50% y padding no caben en una línea con content-box, porque cada una mide 50% más su padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(Los comentarios HTML quitan el espacio entre las columnas inline-block, que de lo contrario sumaría algunos píxeles.)

Ver el modelo de caja en DevTools

Todos los navegadores dibujan el modelo de caja por ti. Haz clic derecho en un elemento, elige Inspeccionar y abre la pestaña Computed (Layout en Firefox): un diagrama muestra el tamaño del contenido en el centro, rodeado de los valores de padding, borde y margin. Al pasar el mouse por un elemento en el panel Elements, la página también se colorea: contenido azul, padding verde, margin naranja.

Las cajas inline siguen otras reglas

El modelo de caja de arriba describe las cajas de bloque como <div> y <p>. Los elementos inline como <span>, <a> y <strong> se acomodan dentro de una línea de texto y tratan el espacio vertical de otra forma:

Propiedad	En un elemento inline
`width`, `height`	Se ignoran
Padding, borde y margin horizontales	Se aplican y empujan a los vecinos hacia los lados
Padding y borde verticales	Se dibujan, pero no empujan las líneas de arriba y de abajo
Margin vertical	Se ignora

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block le da a un elemento dentro de una línea el modelo de caja completo: su ancho, alto, padding y margin ocupan espacio. Consulta padding en CSS y margin en CSS para ver cada capa en detalle.

Errores comunes

Agregar padding a una caja de ancho fijo y no entender por qué creció. Con content-box, el padding y el borde se suman a width. Usa border-box.
Esperar que el margin tome el color de fondo. El margin siempre es transparente; usa padding para un espacio con color.
Poner height o margin vertical en un elemento inline. No pasa nada; usa display: inline-block o block.
Olvidar los bordes en el cálculo. Un borde de 1px en un elemento con width: 100% lo hace 2px más ancho con content-box, lo que puede provocar una barra de desplazamiento horizontal.
Confundir margin y padding. En resumen: el padding va dentro del borde y el margin fuera. La página margin vs padding los compara lado a lado.

Preguntas frecuentes

¿Qué es el modelo de caja en CSS?

Es la regla de que cada elemento se dibuja como una caja rectangular de cuatro capas: el contenido, el padding alrededor, el borde alrededor del padding y el margin fuera del borde. En CSS, el ancho, el alto y los espacios se definen sobre estas capas.

¿Qué hace box-sizing: border-box?

Hace que width y height incluyan el padding y el borde. Una caja con width: 200px, padding: 20px y un borde de 5px mide entonces exactamente 200px de ancho, y el área de contenido se reduce a 150px para caber. El valor por defecto, content-box, suma el padding y el borde por encima, lo que da 250px.

¿Cómo se calcula el ancho total de un elemento?

Con el content-box por defecto: width + padding izquierdo y derecho + borde izquierdo y derecho. Con border-box: solo width. El margin queda fuera de la caja en ambos casos, así que suma al espacio que ocupa el elemento, no a su propio ancho.

¿El margin es parte del modelo de caja?

Sí, es la capa más externa, pero siempre es transparente y nunca se cuenta en el ancho ni en el fondo del elemento. Solo aleja las cajas vecinas.

¿Debo poner box-sizing: border-box en todo?

La mayoría de los proyectos lo hacen, con *, *::before, *::after { box-sizing: border-box; } al principio de la hoja de estilo. Hace que los anchos en porcentaje y el padding sumen como se espera, y frameworks como Bootstrap y Tailwind incluyen el mismo reset.

Conceptos relacionados