Visualiza el Modelo de Caja CSS

Name: Visualiza el Modelo de Caja CSS
Author: Kitmul

Visualiza interactivamente el modelo de caja CSS con edición en vivo de padding, border, margin y contenido.

Visualiza interactivamente el modelo de caja CSS con edición en vivo de padding, border, margin y dimensiones de contenido. Alterna entré content-box y border-box para ver como cambian las dimensiones. Usa presets para tarjetas, botones y secciones hero. Ve las dimensiones calculadas en cada capa, previsualiza el elemento real y copia el CSS generado. Todo se ejecuta en tu navegador sin llamadas al servidor.

Presets:

box-sizing:

Contenido Padding Borde Margen

Contenido (content-box)

Ancho: Alto:

Padding

Arriba: Derecha: Abajo: Izquierda:

Borde

Arriba: Derecha: Abajo: Izquierda:

Margen

Arriba: Derecha: Abajo: Izquierda:

Dimensiones Calculadas

Contenido: 200 x 150

Con Padding: 240 x 190

Con Borde: 244 x 194

Total: 264 x 214

Vista Previa en Vivo

200x150

CSS

box-sizing: content-box;
width: 200px;
height: 150px;
padding: 20px;
border: 2px solid #333;
margin: 10px;

Tus datos no salen de tu navegador

¿Te ha sido útil está herramienta?

Valora está herramienta

Tutorial

Cómo Usar

Ajusta Valores

Edita padding, border, margin y dimensiones de contenido usando los campos numéricos. El diagrama SVG se actualiza en tiempo real.

Alterna Box Sizing

Cambia entré content-box y border-box para ver como se interpretan ancho y alto de manera diferente en cada modelo.

Copia y Usa

Revisa las dimensiones calculadas en cada capa, verifica la vista previa en vivo y copia el CSS generado directamente a tu proyecto.

Guide

Guía Completa del Modelo de Caja CSS

Las Cuatro Capas

Cada elemento tiene contenido (el texto o elementos hijos), padding (espacio transparente dentro del border), border (un borde visible) y margin (espacio transparente fuera del border). Entender estas capas es esencial para el layout CSS.

Content-Box vs Border-Box

El modelo content-box por defecto significa que ancho y alto aplican solo al area de contenido. Border-box incluye padding y border en el ancho y alto declarados, lo cual es generalmente mas intuitivo para trabajó de layout.

Colapso de Margenes

Los margenes verticales adyacentes de elementos de bloque colapsan: solo se aplica el margen mayor. Este comportamiento sorprende a muchos desarrolladores. Padding, border, elementos inline y contenedores flexbox previenen el colapso.

Box Model en Flexbox y Grid

En layouts flexbox y grid, el modelo de caja se aplica a cada item. El contenedor flex o grid controla la ubicación de items mientras que el modelo de caja de cada item determina sus dimensiones internas y espaciado.

Sources

Examples

Ejemplos Resueltos

Ejemplo: Ancho Total en Content-Box

Dado: width 200px, padding 20px cada lado, border 2px cada lado, margin 10px cada lado, box-sizing content-box.

Paso 1: Ancho de contenido = 200px (ancho declarado).

Paso 2: Sumar padding: 200 + 20 + 20 = 240px.

Paso 3: Sumar border: 240 + 2 + 2 = 244px.

Paso 4: Sumar margin: 244 + 10 + 10 = 264px espacio total.

Resultado: El elemento se renderiza a 244px de ancho y ocupa 264px de espacio horizontal total.

Ejemplo: Comparación con Border-Box

Mismos valores pero con box-sizing border-box.

Paso 1: El ancho declarado de 200px ahora incluye padding y border.

Paso 2: Ancho de contenido = 200 - 20 - 20 - 2 - 2 = 156px.

Paso 3: El ancho renderizado se mantiene en 200px (padding y border están dentro).

Paso 4: Sumar margin: 200 + 10 + 10 = 220px espacio total.

Resultado: Border-box hace que el elemento mida 200px independientemente de padding y border. El espacio total es 220px.

Casos de uso

Casos de Uso

Aprende los Básicos del Box Model

“Nuevo en CSS? Edita cada capa y observa como cambia el diagrama para construir una comprensión intuitiva de como contenido, padding, border y margin interactuan para formar las dimensiones del elemento.”

Depura Problemas de Layout

“Ingresa tus valores CSS actuales en la herramienta para ver el espacio total que ocupa un elemento. Alterna box-sizing para entender por qué tu elemento es más ancho de lo esperado.”

Prototipa Espaciado de Componentes

“Usa presets como Tarjeta o Boton como punto de partida, luego ajusta los valores de padding y margin hasta que el espaciado se vea correcto. Copia el CSS directamente a tu hoja de estilos.”

Preguntas Frecuentes

?Qué es el modelo de caja CSS?

Cada elemento HTML es una caja rectangular con cuatro capas: contenido, padding, border y margin. El modelo de caja define como estas capas se combinan para determinar el tamaño total del elemento.

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

En content-box, ancho y alto definen solo el area de contenido. En border-box, ancho y alto incluyen padding y border, simplificando los cálculos de layout.

?Qué box-sizing debería usar?

La mayoría de los resets CSS modernos usan border-box para todos los elementos. Facilita layouts responsivos porque los porcentajes de ancho incluyen padding y border.

?El margin afecta el tamaño del elemento?

No. El margin crea espacio fuera del border y no cambia el tamaño renderizado del elemento. Sin embargo, afecta el espacio total que el elemento ocupa en el layout.

?Qué es el colapso de margenes?

Cuando dos margenes verticales se encuentran, colapsan en un solo margen igual al mayor de los dos. Esto solo ocurre verticalmente y solo con elementos de bloque.

?Mis datos son privados?

Completamente. Todos los cálculos y renderizado ocurren en tu navegador. Ningún dato se envía a ningún servidor.

?Es gratis usar está herramienta?

Si. Completamente gratis sin registró, sin límites y sin anuncios.

?Puedo usar margenes negativos?

El visualizador usa valores no negativos por claridad. En CSS real, los margenes negativos son válidos y acercan o superponen elementos.

Ayúdanos a mejorar

¿Qué te parece está herramienta?

Cada herramienta de Kitmul se construye a partir de peticiones reales de usuarios. Tu valoración y tus sugerencias nos ayudan a arreglar bugs, añadir funciones que faltan y construir las herramientas que realmente necesitas.

Herramientas relacionadas

Visualizador de Árbol de Sintaxis Abstracta (AST)

Visualiza la estructura de tu código JavaScript con un árbol AST detallado.

Probar herramienta

Visualizador de Textos Big Data

Visualiza y busca eficientemente en archivos de texto extremadamente grandes utilizando buffering e infinite scroll.

Probar herramienta

Visualiza Algoritmos de Búsqueda de Caminos

Visualiza algoritmos de búsqueda A*, Dijkstra, BFS y DFS pasó a pasó en una cuadricula interactiva.

Probar herramienta

Lectura Recomendada

Libros Recomendados sobre CSS y Diseñó Web

Potencia tus Capacidades

Productos Recomendados para Desarrollo Web

Raton Inalambrico MX Master 3S con Desplazamiento Ultra-Rápido

Visualiza el Modelo de Caja CSS

Contenido (content-box)

Padding

Borde

Margen

Dimensiones Calculadas

Vista Previa en Vivo

CSS

Cómo Usar

Ajusta Valores

Alterna Box Sizing

Copia y Usa

Guía Completa del Modelo de Caja CSS

Las Cuatro Capas

Content-Box vs Border-Box

Colapso de Margenes

Box Model en Flexbox y Grid

Ejemplos Resueltos

Ejemplo: Ancho Total en Content-Box

Ejemplo: Comparación con Border-Box

Casos de Uso

Aprende los Básicos del Box Model

Depura Problemas de Layout

Prototipa Espaciado de Componentes

Preguntas Frecuentes

?Qué es el modelo de caja CSS?

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

?Qué box-sizing debería usar?

?El margin afecta el tamaño del elemento?

?Qué es el colapso de margenes?

?Mis datos son privados?

?Es gratis usar está herramienta?

?Puedo usar margenes negativos?

¿Qué te parece está herramienta?

Herramientas relacionadas

Visualizador de Árbol de Sintaxis Abstracta (AST)

Visualizador de Textos Big Data

Visualiza Algoritmos de Búsqueda de Caminos

Libros Recomendados sobre CSS y Diseñó Web

CSS: The Definitive Guide

CSS in Depth

CSS: The Definitive Guide (4th Edition)

Productos Recomendados para Desarrollo Web

Raton Inalambrico MX Master 3S con Desplazamiento Ultra-Rápido

Teclado Mecánico Inalambrico K2 Pro para Desarrolladores, Layout 75%

Monitor Portátil USB-C 15.6 pulgadas FHD 1080P para Configuración Dual

Recibe Consejos de Productividad y Nuevas Herramientas Primero

Contenido (content-box)

Padding

Borde

Margen

Dimensiones Calculadas

Vista Previa en Vivo

CSS