Estilos calculados e inspector del modelo de cajas

Chrome DevTools → Elements → la pestaña Computed muestra el valor final calculado de cada propiedad CSS del elemento seleccionado, después de resolver la cascada, la herencia y la especificidad. Responde a la pregunta «¿qué se aplica realmente?» en lugar de «¿qué se escribió?»

El panel Computed muestra un diagrama interactivo del modelo de caja con las dimensiones del contenido, el padding, el borde y el margen del elemento seleccionado. Haga clic en cualquier dimensión para resaltar la regla CSS que la estableció y acceder al panel Styles.

Escriba en el cuadro de filtro para encontrar rápidamente propiedades calculadas específicas. Marque "Show all" para incluir las propiedades heredadas y las predeterminadas del navegador. Desmárquelo para mostrar únicamente las propiedades no predeterminadas, que son el camino más corto hacia los estilos aplicados relevantes.

Las propiedades que aparecen en gris en Computed se heredan de un elemento padre. Haga clic en la propiedad heredada para acceder al elemento y a la regla que la establecieron, y seguir la cascada sin tener que inspeccionar manualmente los elementos padre en el marcado.

Escribir margin: 16px 8px se expande a cuatro valores calculados: margin-top, margin-right, margin-bottom y margin-left. El panel Computed siempre muestra las propiedades longhand individuales, lo que resulta útil para depurar problemas de espaciado asimétrico.

Los valores de color calculados siempre tienen el formato rgb() o rgba(), independientemente de cómo se hayan escrito. Haga clic en una muestra de color del panel Styles para alternar el formato de visualización (hex, hsl, rgb). El panel Computed siempre muestra el color resuelto.

Inspeccione font-size, font-family, line-height y letter-spacing calculados para verificar que los tokens tipográficos se aplican correctamente. Las fuentes alternativas del navegador aparecen en font-family calculado cuando no se puede cargar la fuente solicitada.

box-sizing: border-box hace que width incluya el padding y el borde; box-sizing: content-box (el valor predeterminado) los excluye. El diagrama del modelo de caja de DevTools refleja el modelo que se aplica; compare el ancho del contenido con el ancho total para confirmar el comportamiento de box-sizing.

Los márgenes verticales entre elementos de bloque se colapsan y adoptan el mayor de los dos valores. El diagrama del modelo de caja muestra el margen efectivo; úselo junto con Layout Inspector para identificar márgenes colapsados que difieren de los valores escritos.

El panel Styles muestra todas las reglas dirigidas al elemento en orden de especificidad. Las reglas tachadas han sido sobrescritas. Para determinar qué regla gana un conflicto entre propiedades, busque la declaración superior que no esté tachada en el panel Styles.

Las reglas de la hoja de estilos user-agent del navegador aparecen en la parte inferior del panel Styles, con la etiqueta "user agent stylesheet". Computed muestra sus valores resueltos. Restablézcalos con un CSS reset o Normalize.css para establecer una base coherente entre navegadores.

¿Qué muestra el panel Computed Styles que no muestra el panel Styles?

El panel Computed Styles y el diagrama del modelo de caja revelan los valores finales resueltos de todas las propiedades CSS después de resolver la cascada. Úselos para seguir la herencia, depurar la expansión de abreviaturas, investigar box-sizing e identificar qué regla gana en los conflictos de especificidad de cualquier elemento.