Visualizador de modelos de cajas CSS

Cómo usar

1. Introduce los valores del modelo de caja: define margen, borde, padding y dimensiones del contenido en los campos o los deslizadores interactivos.
2. Explora la visualización: el diagrama clásico de cajas anidadas se actualiza en tiempo real, margen (naranja), borde (amarillo), padding (verde) y contenido (azul), todos claramente etiquetados.
3. Copia el CSS: haz clic en Copiar el CSS para obtener las propiedades completas del modelo de caja del elemento configurado.

¿Por qué usar el visualizador del modelo de caja CSS?

El modelo de caja CSS es uno de los conceptos más fundamentales del diseño web, y una de las fuentes de bugs más habituales, sobre todo al mezclar valores de box-sizing, colapso de márgenes y dimensionamiento de bordes. Este visualizador interactivo hace el modelo de caja concreto y tangible: ajustas los valores y ves inmediatamente cómo se apilan margen, borde y padding alrededor del contenido. Esencial para aprender, depurar y enseñar CSS.

Funcionalidades

• Diagrama interactivo: la vista clásica del modelo de caja anidado con capas codificadas por colores (margen, borde, padding, contenido).
• Conmutador box-sizing: cambia entre content-box y border-box para ver cómo afecta cada modo a las dimensiones totales.
• Lados individuales: define los valores arriba/derecha/abajo/izquierda de forma independiente para margen, padding y borde.
• Cálculo del tamaño total: muestra el ancho y alto totales calculados del elemento.
• Salida CSS: genera CSS listo para usar para el modelo de caja configurado.

Preguntas frecuentes

¿Cuál es la diferencia entre content-box y border-box?

Con content-box (por defecto), width y height se aplican únicamente a la zona de contenido, padding y borde se añaden al tamaño total del elemento. Con border-box, width y height incluyen padding y borde, lo que hace los tamaños más predecibles. La mayoría de los resets CSS modernos aplican box-sizing: border-box a todos los elementos.

¿Qué es el colapso de márgenes?

Cuando dos márgenes verticales se tocan (entre elementos block adyacentes o entre padre y primer/último hijo), se fusionan en un único margen igual al mayor de los dos valores. Esto no ocurre con los hijos flex o grid, ni con elementos que tengan padding o bordes.

¿Cómo retirar el espacio adicional debajo de los elementos inline?

Los elementos inline (como <img>) tienen un pequeño espacio debajo causado por la alineación de la línea base del line-height. Corrígelo poniendo display: block en el elemento, o vertical-align: bottom, o font-size: 0 en el padre.

Lo que el modelo de caja CSS realmente define

El modelo de caja CSS es la representación rectangular de cada elemento en una página web. Cada elemento tiene cuatro cajas concéntricas: la caja de contenido (donde viven texto, imágenes, elementos hijos), la caja de padding (espacio entre el contenido y el borde, dentro del límite visible), la caja del borde (el contorno visible dibujado alrededor del padding) y la caja de margen (espacio transparente fuera del borde que separa este elemento de sus vecinos). El tamaño visible total de un elemento es contenido + padding + borde; el margen es invisible pero empuja a otros elementos.

El concepto crítico es box-sizing. Por defecto (box-sizing: content-box, el valor de la especificación CSS 1), las propiedades width y height se aplican solo a la caja de contenido. Si estableces width: 200px; padding: 20px; border: 2px solid, el ancho renderizado total es 200 + 40 + 4 = 244 píxeles. Esto es contraintuitivo: un elemento «de 200px de ancho» en realidad ocupa 244 píxeles de espacio horizontal. La alternativa box-sizing: border-box (agregada en CSS 3) invierte esto: la propiedad width es el tamaño visible total incluyendo padding y borde, así que el área de contenido se reduce para encajar. border-box es lo que la mayoría de los desarrolladores esperan; se convirtió en el estándar de facto a través del reset CSS «* { box-sizing: border-box }» de Paul Irish de 2012.

Entender el modelo de caja importa porque los errores de diseño casi siempre rastrean a la confusión sobre qué valor se aplica a qué caja. «¿Por qué mi elemento es más ancho de lo que establecí?» es sorpresa de content-box. «¿Por qué mi margen no empuja a los hermanos hacia abajo?» suele ser colapso de márgenes. «¿Por qué padding-top: 50% se comporta extraño?» es porque el padding porcentual se calcula relativo al ancho del padre, no a la altura. Cada desarrollador CSS encuentra estas confusiones; este visualizador las hace concretas dejándote ajustar valores y ver la geometría de caja resultante en tiempo real.

Cómo funciona esta herramienta tras bambalinas

El diagrama interactivo es una serie de divs coloreados anidados correspondientes a cada caja (margen en naranja, borde en amarillo, padding en verde, contenido en azul). A medida que cambias los valores de entrada, JavaScript actualiza los atributos style en línea de los divs del diagrama para que reflejen los valores numérica y visualmente. Las proporciones se escalan para encajar en el área de vista previa; los valores de píxeles absolutos empujarían el diagrama fuera de la pantalla para entradas típicas.

El cálculo del tamaño total depende del modo box-sizing. Para content-box: ancho total = ancho del contenido + padding-left + padding-right + border-left + border-right. Para border-box: ancho total = el valor de width (padding y borde se restan del área de contenido). La herramienta calcula ambos modos simultáneamente cuando alternas box-sizing, así puedes comparar directamente.

La salida CSS generada usa tus entradas como valores de propiedad: box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;. Copia esto directamente en tu hoja de estilos y aplica la clase correspondiente. Nada sale de tu navegador; todo se ejecuta localmente en JavaScript. Sin analíticas, sin backend, sin cuenta. Refresca y el estado se va.

Breve historia del modelo de caja CSS

• CSS 1 especifica content-box, 1996.La recomendación CSS 1 (diciembre de 1996) define el modelo de caja W3C: el ancho se aplica solo al contenido, padding y borde se suman al tamaño total. Esto se convierte en el estándar, pero Internet Explorer 4 y 5 implementan un modelo alternativo donde el ancho incluye padding y borde (similar al border-box de hoy).
• Modo quirks de IE y la Guerra del Modelo de Caja, 1997 a 2001.IE 4 (1997) e IE 5 vienen con su modelo de caja no estándar; IE 6 (2001) introduce «modo estándares» activado por una declaración doctype que cambia al modelo de caja W3C. La discrepancia crea años de errores de diseño entre navegadores y el conocimiento «modo quirks vs modo estándares» que cada desarrollador web debe aprender hasta 2010.
• Reset CSS y hoja de estilo clásica de Eric Meyer, 2007.Eric Meyer publica el reset CSS canónico (mayo de 2007) que pone márgenes, paddings y otros valores predeterminados a cero en todos los elementos. Se convierte en práctica estándar para un estilo predecible entre navegadores. El reset no aborda box-sizing directamente pero normaliza el caos alrededor de los valores predeterminados heredados.
• Propiedad box-sizing en CSS3, 2009 a 2014.CSS3 introduce box-sizing: border-box como una alternativa opt-in a content-box. WebKit y Firefox lo soportan desde 2009; IE 8 (2009) se convierte en la primera versión de IE en soportarlo nativamente. Permite a los desarrolladores elegir el modelo de caja estilo IE o estilo W3C por elemento.
• Border-box universal de Paul Irish, 2012.Paul Irish (Google) publica el post de blog «* { box-sizing: border-box } FTW» (febrero de 2012), argumentando que el border-box universal es un predeterminado sensato para nuevos proyectos. El patrón se extiende rápidamente a través de los valores predeterminados de framework (Bootstrap, Tailwind, Material UI). Para 2015, la mayoría de los resets CSS y frameworks se envían con border-box como predeterminado.
• Propiedades lógicas, 2018 a 2024.CSS Logical Properties and Values Module Level 1 (CR junio de 2018) introduce alternativas agnósticas a la dirección: margin-inline-start (inicio de la dirección del texto) en lugar de margin-left, padding-block (arriba + abajo) en lugar de padding-top + padding-bottom. Crítico para idiomas de derecha a izquierda (árabe, hebreo) e internacionalización moderna. El soporte del navegador alcanza el 95%+ para 2022.

Flujos del mundo real

• Depurar errores de diseño.Cuando un elemento se renderiza en un tamaño inesperado, abrir el panel de estilo computado de DevTools del navegador revela los cuatro valores de caja numéricamente. Este visualizador es útil para hacer las matemáticas de antemano: «si establezco width 200, padding 16, border 2, ¿cuál es el tamaño total en cada modo box-sizing?». Especialmente útil al enseñar a juniors por qué width: 100% con padding desborda al padre en modo content-box.
• Enseñar CSS a principiantes.El modelo de caja es el primer concepto abstracto que los desarrolladores web principiantes deben interiorizar. Una visualización interactiva codificada por color supera leer especificaciones. Instructores de bootcamp y autodidactas usan visualizadores de modelo de caja como una forma «táctil» de ver cómo margen, borde y padding se apilan. Esta herramienta existe en parte para este propósito.
• Dimensionamiento de componentes del sistema de diseño.Los sistemas de diseño especifican alturas de botón, ritmos de padding y escalas de margen en tokens (e.g., spacing-1, spacing-2, spacing-3). Al implementar estos en código, el modelo de caja determina si el botón renderizado final es del tamaño previsto. Visualiza las matemáticas primero para detectar errores off-by-padding antes de que lleguen al handoff de Figma-a-React.
• Diseño responsive y márgenes porcentuales.Los valores porcentuales para padding, margen, width y height se calculan relativos al ancho del contenido del padre (no la altura, sorprendentemente), lo que puede causar comportamiento extraño en móvil. El visualizador del modelo de caja te ayuda a pensar qué significan los porcentajes antes de escribir el CSS. Por ejemplo, padding-top: 50% en un div crea un contenedor de proporción cuadrada (usado para placeholders de imagen en los días previos a la propiedad aspect-ratio).
• Dimensionamiento de objetivos táctiles de accesibilidad.WCAG 2.1 SC 2.5.5 (Nivel AAA) recomienda objetivos táctiles mínimos de 44x44 píxeles CSS. El modelo de caja determina si el contenido combinado + padding de un botón cumple este umbral. Usa el visualizador para confirmar que padding: 12px 16px alrededor de texto con altura de línea de 18px da un botón que excede 44px en ambas dimensiones, satisfaciendo la directriz.
• Alineación CSS Grid y Flexbox.Las herramientas de diseño modernas (CSS Grid, Flexbox) tratan cada elemento grid/flex como una caja sujeta al modelo de caja. Entender cómo padding y margen interactúan con gap, justify-content y align-items requiere fluidez en el modelo de caja. El colapso de márgenes se suprime dentro de contenedores flex/grid, lo que a menudo sorprende a desarrolladores CSS acostumbrados al diseño de bloque tradicional.

Trampas comunes y lo que significan

• Sorpresas de colapso de márgenes.Cuando dos elementos de bloque tienen márgenes tocándose verticalmente, colapsan en el mayor de los dos, no en la suma. Un margen inferior de 20px encontrándose con un margen superior de 30px produce 30px de espacio, no 50px. Los márgenes padre y primer/último hijo también colapsan si el padre no tiene padding, borde u overflow establecido. Dentro de contenedores flex o grid, los márgenes no colapsan. Esta regla ha atrapado a cada desarrollador CSS en algún momento.
• Matemáticas de ancho content-box vs border-box.Establecer width: 100%; padding: 20px en un elemento content-box lo hace 40px más ancho que el padre (desbordamiento). Con border-box, la misma declaración se sitúa dentro del padre correctamente. Esta es la trampa de modelo de caja más común; la regla universal * { box-sizing: border-box } arregla la mayoría preventivamente. Siempre sabe en qué modo estás trabajando.
• El padding/margen porcentual es relativo al ancho.padding-top: 50% y margin-bottom: 50% calculan el porcentaje basado en el ancho del contenido del padre, no la altura. Esto no es obvio y es la base del clásico hack «contenedor de proporción de aspecto» (un div con padding-top: 56.25% crea una caja 16:9). Ahora CSS tiene la propiedad aspect-ratio, pero el código heredado y el Tailwind moderno ambos dependen del truco del padding porcentual.
• Espacio de línea base de elementos en línea.Una <img> dentro de un div contenedor tiene un misterioso espacio de 4 a 6 píxeles debajo. Esto es porque los elementos en línea se alinean a la línea base del texto, dejando espacio para descendientes. Arregla con img { display: block }, img { vertical-align: bottom }, o estableciendo font-size: 0 en el padre. Este es uno de los errores más antiguos del modelo de caja en CSS, datando de 1996.
• Márgenes negativos para trucos de diseño.Los márgenes aceptan valores negativos, que tiran de los elementos uno hacia el otro y son ocasionalmente útiles (e.g., expandir un contenedor «fuera» del padding de su padre). Sin embargo, los márgenes negativos son una fuente frecuente de errores de superposición confusos. Úsalos deliberadamente, comenta tu código, y prefiere el posicionamiento CSS Grid/Flexbox cuando sea posible. El padding negativo es CSS inválido e ignorado por los navegadores.
• Padding + borde + contenido > contenedor.Cuando la suma de contenido + padding + borde excede el ancho disponible del padre, el elemento se desborda. Arreglos comunes: box-sizing: border-box, reducir el valor de width, usar overflow: hidden en el padre (recortar el desbordamiento), o min-width: 0 en hijos flex para anular el comportamiento implícito min-width: auto. Muchos errores «el diseño se rompe en móvil» son desbordamientos causados por matemáticas del modelo de caja.

Privacidad: todo se ejecuta en tu navegador

Las herramientas de aprendizaje y visualización CSS vienen en dos sabores: páginas HTML simples ejecutando JavaScript del lado del cliente (privadas, rápidas, sin configuración) y editores en la nube con proyectos guardados (colaborativos pero con compensaciones de privacidad). Esta herramienta es del primer tipo. Tus valores ingresados, tu estado de toggle box-sizing, tu CSS generado: todo permanece en tu sesión del navegador. Refresca la página y el estado se va a menos que hayas copiado el CSS primero.

Los riesgos de privacidad son bajos aquí porque los valores del modelo de caja raramente contienen información sensible. Aun así, la falta de analíticas importa: puedes experimentar libremente sin que tu proceso de prueba y error sea registrado. Particularmente útil en entornos de aula o capacitación corporativa donde hacer que los estudiantes o aprendices registren cuentas en plataformas de terceros es un punto de fricción. Esta es una sola página estática sin backend, utilizable en cualquier navegador, incluidas máquinas empresariales bloqueadas.

Cuándo otra herramienta es la opción correcta

• DevTools del navegador para depuración en vivo.Chrome y Firefox DevTools incluyen un panel de modelo de caja que muestra los cuatro valores de caja para cualquier elemento seleccionado en una página en vivo. Edita los valores en línea y ve actualizarse la página. Para depurar diseños de página reales (no exploración abstracta del modelo de caja), DevTools supera esta herramienta porque funciona en tu código real con cascadas CSS reales y herencia.
• Figma para salida de especificación de diseño.Los diseñadores usan Figma, Sketch o Adobe XD para diseñar componentes con mediciones exactas en píxeles. El panel de inspección de la herramienta de diseño exporta valores de margen y padding que los desarrolladores traducen a CSS. Para el handoff de diseño-a-desarrollo, la herramienta de diseño es la fuente de verdad; este visualizador es para entender el comportamiento de CSS, no para generar especificaciones de componentes de producción.
• CSS-in-JS para encapsulación de componentes.Al construir bibliotecas de componentes con styled-components, Emotion, vanilla-extract o soluciones CSS-in-JS similares, el modelo de caja se encapsula dentro de cada componente. Márgenes en el envoltorio más externo, padding adentro. Este visualizador ayuda a razonar sobre la geometría de un componente individual; la biblioteca maneja la coordinación de diseño entre componentes.
• Herramientas CSS Grid/Flexbox para diseño.Para diseños multi-elemento (cuadrículas de página, galerías de tarjetas, barras de navegación), CSS Grid y Flexbox son las abstracciones correctas, no solo el modelo de caja. Nuestras herramientas Flexbox Generator y CSS Grid Generator ayudan con esos diseños directamente. El modelo de caja es necesario pero no suficiente para el diseño moderno; usa la herramienta correcta para la escala correcta.

Más preguntas frecuentes

¿Debo usar universal * { box-sizing: border-box }?

Para la mayoría de los proyectos, sí. La propuesta de Paul Irish de 2012 ahora es el predeterminado de la industria y se alinea con cómo la mayoría de los desarrolladores esperan que width y height funcionen. Frameworks como Bootstrap, Tailwind, Bulma y Material UI vienen con border-box como predeterminado. Los proyectos modernos comenzando en 2026 deberían establecer *, *::before, *::after { box-sizing: border-box; } en la parte superior de su reset, y raramente necesitar pensar en box-sizing de nuevo. Las anulaciones específicas a content-box son posibles para elementos individuales donde border-box estropearía las cosas.

¿Por qué mi margen empuja al padre hacia abajo en lugar de empujar a los hermanos?

Esto es colapso de márgenes. Cuando el margen superior de un hijo se encuentra con el borde superior del padre sin padding/borde entre ellos, el margen del hijo «escapa» y se aplica al padre en su lugar. Arreglos: agregar padding-top: 1px al padre (cualquier valor funciona), agregar border: 1px solid transparent, establecer el padre como contenedor flex o grid (el colapso se suprime en esos modos), o usar display: flow-root en el padre (una regla moderna explícita «establecer un nuevo contexto de formato de bloque»). Todos estos bloquean el margen de colapsar a través.

¿Cuál es la diferencia entre margin: auto y margin: 0?

margin: 0 significa sin margen; el elemento se encuentra al ras con sus vecinos. margin: auto significa que el navegador calcula el margen para distribuir el espacio horizontal restante, típicamente usado para centrar un elemento de bloque: margin-left: auto; margin-right: auto; divide igualmente el espacio restante. margin: auto auto auto auto (o abreviatura margin: auto) centra tanto horizontal como verticalmente dentro de un contenedor flex. Fuera de flex/grid, solo funcionan los márgenes auto horizontales.

¿En qué difiere outline de border?

Outline dibuja alrededor de un elemento pero está fuera del modelo de caja: no agrega al tamaño del elemento ni empuja a los vecinos. Border es parte del modelo de caja y agrega al tamaño renderizado. Outline se usa típicamente para anillos de foco (contornos :focus-visible) donde quieres un indicador visible sin desplazar el diseño. Border se usa cuando la línea debería ser parte de la estructura del elemento. No elimines outline: none sin proporcionar un indicador de foco alternativo; hacerlo rompe la accesibilidad de teclado.

¿Por qué usar propiedades lógicas como margin-inline-start?

Las propiedades lógicas (margin-block-start, padding-inline, etc.) se adaptan a la dirección de escritura del documento. En inglés (de izquierda a derecha), margin-inline-start es lo mismo que margin-left. En árabe o hebreo (de derecha a izquierda), se convierte en margin-right automáticamente. Para sitios que soportan múltiples idiomas, las propiedades lógicas hacen la internacionalización CSS automática. Para sitios solo en inglés, son equivalentes en efecto pero señalan la intención más claramente: «este margen está al inicio del flujo de texto» en lugar de «este margen está en el lado izquierdo».

¿Cómo creo una caja de proporción de aspecto fija?

La forma moderna es la propiedad CSS aspect-ratio: aspect-ratio: 16/9 en un div hace que su altura sea automáticamente 9/16 de su ancho. Soportado en todos los navegadores modernos (2021+). La técnica heredada usa padding-top como porcentaje: un div con padding-top: 56.25% crea una proporción 16:9 (9/16 = 56.25%). El truco padding-top sigue funcionando pero la sintaxis de propiedad es más limpia. Usa aspect-ratio para código nuevo; el hack heredado permanece en Tailwind y otras herramientas que necesitan soporte amplio del navegador.