Cargando...

Box Sizing en CSS

Ya sabes que el padding y el borde pueden hacer una caja más grande que el width declarado. box-sizing elige la regla de esa cuenta: ¿width significa «solo contenido» o «contenido más padding más borde»?

Dos modelos de un vistazo

📊 content-box frente a border-box

Modelo Qué cubren width / height Efecto cotidiano
content-box (por defecto) Solo contenido Padding y borde se suman fuera del tamaño declarado
border-box Contenido + padding + borde El tamaño declarado es el borde exterior; el contenido se encoge
Margin No incluido en ninguno El hueco exterior sigue separado de box-sizing

Por defecto: content-box

Con el modelo por defecto, width: 200px mide el contenido. Añade padding y borde, y la caja pintada crece.

Content-box (por defecto)

css
CSS Code 
.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* Contenido 200px + padding + borde → total más ancho */

Pasa a border-box

Con border-box, el mismo width: 200px incluye padding y borde. El borde exterior se queda cerca de 200px; el área de contenido se reduce.

Dimensionado border-box

css
CSS Code 
.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* La caja de borde exterior apunta a 200px; el contenido se encoge */

Mismos números, distinta huella

Pon ambos modelos lado a lado con el mismo ancho, padding y borde.

Comparar los dos modelos

css
CSS Code 
.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}

.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Mismas declaraciones; .contenty ocupa más espacio horizontal */

Por qué a los equipos les gusta border-box

Cuando una tarjeta debe llenar exactamente una columna — por ejemplo width: 100% con padding — border-box evita que se desborde del padre.

Tarjeta amable con la columna

css
CSS Code 
.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}

Un hábito global calmado

Muchas hojas de estilo ponen border-box una vez para todo, para que la cuenta diaria de anchos sea predecible. El margin sigue fuera.

Hábito universal border-box

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

Pruébalo tú

  1. Construye .panel-content con width: 200px, padding y borde bajo content-box.
  2. Cópialo como .panel-border con box-sizing: border-box — mira el tamaño exterior acercarse a 200px.
  3. Coloca .contenty y .borderish lado a lado con los mismos números.
  4. Haz una tarjeta width: 100% con padding; cambia box-sizing y mira cuál se desborda.
  5. Prueba el hábito universal * en una página demo pequeña.

Errores comunes

  • Pensar que border-box incluye también el margin (no lo hace)
  • Olvidar que el valor por defecto es content-box hasta que lo cambies
  • Esperar que outline siga a box-sizing (outline sigue fuera y no ocupa espacio de diseño)
  • Declarar width: 100% con mucho padding bajo content-box y sorprenderse del desborde
  • Mezclar porcentajes sin saber qué modelo de dimensionado está activo

Resumen

  • Por defecto box-sizing: content-box mide el contenido; padding y borde se suman
  • border-box mantiene padding y borde dentro del ancho/alto declarado
  • El margin queda fuera de ambos modelos
  • Border-box suele facilitar anchos de columna y tarjetas width: 100%
  • Un reset universal border-box es un hábito común y calmado

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Css Tutorial