Ciencias de la Computación · Ceibal · Modelo de Caja · Extra: box-sizing
📦 box-sizing
Sección 1 de 3

box-sizing — el interruptor del tamaño total

Ya viste que el ancho total de una caja incluye el padding, el borde y el margin, además del width (el famoso "cálculo total"). box-sizing decide si ese cálculo lo haces tú a mano, o si el navegador lo hace por ti.

📐 content-box — el valor por defecto

Con box-sizing: content-box (el valor por defecto de todo elemento), width y height miden solo el contenido. El padding y el borde se suman aparte, así que la caja final termina siendo más grande que el width que escribiste.

⚠️ Esto es justo lo que te obligaba a hacer el "cálculo total" a mano: si querías una caja de un tamaño exacto, tenías que restarle el padding y el borde al width antes de escribirlo.
.caja {
  box-sizing: content-box; /* valor por defecto, ni hace falta escribirlo */
  width: 200px;
  padding: 20px;
  border: 10px solid black;
}
/* ancho final = 200 + 20+20 + 10+10 = 260px */
🧩 ¿Lo entendiste? · Calcula el ancho final
1 · Completar: el ancho final con content-box
/* width: 100px; padding: 15px; border: 5px solid; (content-box) */
/* ancho final = 100 + 15+15 + 5+5 = ¿? */
.a { /* ancho final: px */ }

/* width: 200px; padding: 10px; border: 0; (content-box) */
.b { /* ancho final: px */ }

📦 border-box — todo incluido

Con box-sizing: border-box, width y height pasan a incluir el padding y el borde. La caja se queda exactamente en el tamaño que declaraste, sin importar cuánto relleno o borde le agregues después.

.caja {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
}
/* ancho final = 200px, siempre. El navegador achica el contenido, no la caja */
🧩 ¿Lo entendiste? · Cada modo con su efecto
2 · Arrastrar y soltar: content-box vs. border-box
width/height miden solo el contenido; padding y border se suman aparte →
width/height incluyen padding y border; la caja no crece →

✅ Repaso rápido

Antes de probarlo en vivo, un repaso: la diferencia entre los dos modos está en qué mide width, no en cuánto padding o borde le pusiste.

📦 content-box (por defecto): width = solo contenido. border-box: width = contenido + padding + border, todo junto.
✅ Repaso rápido · Opción múltiple
3 · Opción múltiple: box-sizing

⚙️ Prueba box-sizing en vivo

El width declarado siempre es 200px. Cambia el modo, y el padding y el borde, y mira cómo cambia (o no) el ancho final renderizado.

200px declarado

Ancho final renderizado: 260px


  

        

        

      

    

    

      
      

      
    

  








  
¡Arma una caja compacta que no crezca! 🚀

  

    
🎯 MISIÓN: La caja de 200×120px exacta

    
Vas a armar una caja que mida exactamente 200×120px por fuera, con relleno y borde generosos. Tu caja debe tener:

    
    
      
  • box-sizing: border-box; para que el navegador incluya padding y border dentro del tamaño
    • 
      
  • width: 200px; height: 120px; — este va a ser el tamaño final, sin trucos
    • 
      
  • padding: 20px; de relleno interno
    • 
      
  • border: 6px solid; de borde
    • 
    

  


  
🛤️ Flujo de trabajo (método paso a paso)

  

    
1
📦 Activa border-box antes que nada.

    
2
📐 Define width y height en el tamaño final que quieres.

    
3
🧱 Agrega el padding que necesites, sin miedo.

    
4
🔲 Agrega el borde.

    
5
📥 Ejecuta y confirma que la caja no creció.

  


  

  💻 Tu simulador
  

  
El HTML ya está armado con todo lo que necesitas para la misión: tú pones el CSS. Tab inserta 2 espacios.

  
    
    
  1. En .caja, agrega box-sizing: border-box; para que width y height incluyan el relleno y el borde.
    2. 
    
  2. Agrega width: 200px; y height: 120px; — este es el tamaño final que vas a ver.
    3. 
    
  3. Agrega padding: 20px; y border: 6px solid; — la caja no debería crecer ni un píxel.
    4. 
    
  4. Ejecuta y confirma que la caja midió exactamente 200×120px, a pesar del relleno y el borde.
    5. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
      
    

    

  

  

  








  
📖 Glosario interactivo

  
Toca cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.