Visualiza el Modelo de Caja CSS

Name: Visualiza el Modelo de Caja CSS
Author: Kitmul

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

Visualiza interactivamente el modelo de caja CSS con edicion en vivo de padding, border, margin y dimensiones de contenido. Alterna entre 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 esta herramienta?

Valora esta herramienta

Tutorial

Como Usar

Ajusta Valores

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

Alterna Box Sizing

Cambia entre 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

Guia 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 trabajo 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 ubicacion 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: Comparacion 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 estan 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 Basicos del Box Model

“Nuevo en CSS? Edita cada capa y observa como cambia el diagrama para construir una comprension 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 que tu elemento es mas 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

?Que 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 tamano total del elemento.

?Cual 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 calculos de layout.

?Que box-sizing deberia usar?

La mayoria 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 tamano del elemento?

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

?Que 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 calculos y renderizado ocurren en tu navegador. Ningun dato se envia a ningun servidor.

?Es gratis usar esta herramienta?

Si. Completamente gratis sin registro, sin limites y sin anuncios.

?Puedo usar margenes negativos?

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

Ayúdanos a mejorar

¿Qué te parece esta 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 Busqueda de Caminos

Visualiza algoritmos de busqueda A*, Dijkstra, BFS y DFS paso a paso en una cuadricula interactiva.

Probar herramienta

Lectura Recomendada

Libros Recomendados sobre CSS y Diseno Web

Potencia tus Capacidades

Productos Recomendados para Desarrollo Web

Raton Inalambrico MX Master 3S con Desplazamiento Ultra-Rapido

Visualiza el Modelo de Caja CSS

Contenido (content-box)

Padding

Borde

Margen

Dimensiones Calculadas

Vista Previa en Vivo

CSS

Como Usar

Ajusta Valores

Alterna Box Sizing

Copia y Usa

Guia 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: Comparacion con Border-Box

Casos de Uso

Aprende los Basicos del Box Model

Depura Problemas de Layout

Prototipa Espaciado de Componentes

Preguntas Frecuentes

?Que es el modelo de caja CSS?

?Cual es la diferencia entre content-box y border-box?

?Que box-sizing deberia usar?

?El margin afecta el tamano del elemento?

?Que es el colapso de margenes?

?Mis datos son privados?

?Es gratis usar esta herramienta?

?Puedo usar margenes negativos?

¿Qué te parece esta herramienta?

Herramientas relacionadas

Visualizador de Árbol de Sintaxis Abstracta (AST)

Visualizador de Textos Big Data

Visualiza Algoritmos de Busqueda de Caminos

Libros Recomendados sobre CSS y Diseno 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-Rapido

Teclado Mecanico Inalambrico K2 Pro para Desarrolladores, Layout 75%

Monitor Portatil USB-C 15.6 pulgadas FHD 1080P para Configuracion Dual

Recibe Consejos de Productividad y Nuevas Herramientas Primero

Contenido (content-box)

Padding

Borde

Margen

Dimensiones Calculadas

Vista Previa en Vivo

CSS