Visualizador de modelo de caja
Herramienta de visualizador de modelo de caja
Qué es el modelo de caja CSS
Cada elemento HTML se representa como un recuadro rectangular. El modelo de caja CSS describe cómo las capas de contenido, padding, border y margin del elemento se superponen para determinar el espacio total que ocupa en la página. Comprender este modelo es esencial para controlar el diseño y el espaciado.
Cómo usar el visualizador
Ajusta las entradas numéricas de cada capa — margin, border, padding y dimensiones del contenido. Haz clic en una sección de capa para resaltarla en el diagrama. La vista previa visual se actualiza al instante, y el código CSS correspondiente se genera en la parte inferior para que puedas copiarlo.
Entender Margin, Border, Padding y Content
El margin es el espacio transparente fuera del border que separa el elemento de sus vecinos. El border es el límite visible alrededor del padding. El padding es el espacio entre el border y el contenido real. El content es el área más interna donde aparecen el texto y los elementos secundarios.
Box-sizing: content-box vs border-box
Con content-box (predeterminado), el width y height establecidos se aplican solo al área de contenido — el padding y border se añaden encima. Con border-box, width y height incluyen padding y border, lo que hace que los cálculos de diseño sean más intuitivos. La mayoría de los proyectos modernos usan border-box globalmente.
Consejos para depurar problemas de diseño
Usa este visualizador para experimentar con diferentes valores y ver cómo cada capa contribuye al tamaño total del elemento. Cuando un elemento ocupa más espacio del esperado, comprueba si los valores de padding o border lo están empujando más allá del ancho deseado. El CSS generado se puede pegar directamente en tu proyecto.
▶¿Qué es el modelo de caja CSS?
▶¿Cuál es la diferencia entre margin y padding?
▶¿Cómo afecta box-sizing a mi diseño?
▶¿Por qué mi elemento ocupa más espacio que su ancho?
▶¿Qué es el colapso de márgenes?
▶¿Cómo centro un elemento usando el modelo de caja?
▶¿Puedo usar márgenes negativos?
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.