Cuando empiezas con desarrollo web, HTML es el esqueleto; CSS es el diseño y el comportamiento visual. Y en CSS, todo —sí, todo— es una caja. Por eso el box model es literalmente el idioma base de la maquetación: te dice cuánto mide una caja, cuánto espacio ocupa hacia dentro (padding), hacia fuera (margin) y en el borde (border).
En mi experiencia, la diferencia entre “poner color a algo” y entender de verdad por qué tu layout se rompe está en dominar este modelo. Yo también pasé por esa etapa en la que “el diseño no se me da mucho” y centrar un div parecía magia. El giro vino cuando interioricé cómo suman ancho, padding y borde… y por qué mis márgenes “desaparecían”.
¿Por qué es el Paso 2? Porque después de escribir etiquetas en HTML, lo siguiente es posicionarlas y dimensionarlas con sentido: decidir el ancho de una sección, separar bloques, alinear componentes. Y eso se aprende hablando el idioma del box model.
Una caja CSS tiene cuatro zonas:
Además, cada elemento participa en el flujo del documento como bloque (display: block) o en línea (display: inline). Las cajas de bloque ocupan todo el ancho disponible y apilan una debajo de otra; las en línea fluyen en el renglón.
Tip desde la experiencia: cuando la IA me genera un estilo que “casi” sirve pero algo no cuadra, abro DevTools y activo el panel de “Box model”. Ver el diagrama coloreado de margin/padding/border te aclara el problema en segundos.
<div class="card">Hola, soy una caja</div>
.card{
background:#f5f5ff;
color:#222;
padding:16px;
border:4px solid #6c63ff;
margin:24px;
width:300px;
}
Frase que repito a principiantes: “No pelees con span para que mida 200px; conviértelo en inline-block o block”.
<p>Texto antes <span class="chip">Etiqueta</span> y texto después</p> <div class="bloque">Soy block</div>
.chip{ display:inline; background:#ffe9a8; padding:8px 12px; } .bloque{ display:block; background:#a8ffe0; padding:12px; width:200px; }
Cambia .chip a inline-block y dale width:150px. Observa cómo ahora sí respeta el ancho.
Por defecto, width define solo el contenido. Si declaras width: 300px y luego añades padding: 20px y border: 4px, el ancho total crece (300 + 20 + 20 + 4 + 4 = 348px). Con box-sizing: border-box, el width pasa a abarcar contenido + padding + border; es decir, no se infla al añadir acolchados o bordes.
En mi caso, activar box-sizing: border-box fue el punto de inflexión para dejar de romper layouts. Desde entonces inicio cada proyecto con un reset global.
Reset recomendado:
*, *::before, *::after{
box-sizing: border-box;
}
<div class="caja a">A</div> <div class="caja b">B</div>
.caja{ width:300px; padding:20px; border:4px solid #333; background:#e7f3ff; margin:12px 0; } .a{ box-sizing: content-box; } /* total = 348px */ .b{ box-sizing: border-box; } /* total = 300px */
Abre DevTools y verifica el ancho total de cada una.
Con content-box (por defecto):
ancho_total = width + padding_izq + padding_der + border_izq + border_der + margin_izq + margin_der alto_total = height + padding_sup + padding_inf + border_sup + border_inf + margin_sup + margin_inf
Con border-box:
ancho_total = width (ya incluye padding y border) + margin_izq + margin_der alto_total = height (ya incluye padding y border) + margin_sup + margin_inf
Errores típicos que rompen layouts:
<div class="wrap"> <div class="item">Item</div> </div>
.wrap{ width:320px; outline:1px dashed #999; } .item{ width:100%; padding:24px; border:4px solid #222; background:#fafafa; /* Prueba content-box vs border-box */ box-sizing: content-box; /* cámbialo a border-box */ }
Con content-box verás que el item se sale de .wrap. Cambia a border-box y observa cómo encaja perfecto.
Colapso de márgenes: cuando dos márgenes verticales de cajas de bloque se tocan, puede que se combinen en uno solo (toma el mayor). Suele pasar entre elementos consecutivos o entre el primer/último hijo y su contenedor si este no tiene padding/border.
Cuando estaba aprendiendo, me frustraba que “mis márgenes desaparecieran”. La solución solía ser añadir padding-top: 1px o overflow: auto al contenedor para evitar el colapso, o simplemente usar gap si estaba en flex/grid.
<section class="contenedor"> <h2 class="titulo">Título</h2> <p class="parrafo">Texto</p> </section>
.contenedor{ background:#f0fff4; } .titulo{ margin-top:24px; } .parrafo{ margin-top:24px; }
Mira el espacio arriba del contenedor: ese margin-top del h2 colapsa hacia fuera.
Ahora agrega al contenedor:
.contenedor{ background:#f0fff4; padding-top:1px; /* o border-top:1px solid transparent; */ }
Verás que el margen ya no colapsa.
Centrar ya no debería ser sufrimiento. Tienes tres familias de soluciones:
.padre{
min-height: 300px;
display:flex;
justify-content:center; /* horizontal */
align-items:center; /* vertical */
}
.hijo{ width:200px; height:100px; background:#ffd6e7; }
A mí “se me hizo la luz” cuando adopté flex para centrar. Pasé de hacks a una línea por eje.
.padre{
min-height:300px;
display:grid;
place-items:center; /* atajo para align-items + justify-items */
}
Crea un contenedor y prueba flex, grid y el método clásico; alterna clases en el padre y confirma que el hijo queda centrado en ambos ejes.
Cuando la IA me devuelve un estilo que “no me entiende”, mi criterio CSS decide: miro el box model, verifico box-sizing, reviso gaps y márgenes, y ajusto en segundos.
La IA acelera, pero la precisión la pones tú: entender el box model te permite corregir, centrar y dimensionar con seguridad. A mí me costó al principio —lo admito—, pero una vez interiorizado (y con border-box como base) todo encaja. El día que abres DevTools y entiendes lo que ves, pasas de adivinar a diseñar con intención.
No hay comentarios aún. ¡Sé el primero en comentar!
🍪 Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al continuar navegando, aceptas nuestro uso de cookies. Más información
