¿Cuáles son los colores de resaltado de las herramientas de desarrollador de Chrome?

En versiones anteriores de Chrome, las herramientas de desarrollador le permitían inspeccionar los elementos de la página y los resaltaban en azul. Las versiones recientes de Chrome resaltan elementos en azul, pero también tienen áreas verdes y naranjas.

¿Qué significan los colores?

Los colores representan las áreas de elementos correspondientes al modelo de caja CSS .

• Azul es el contenido
• El verde es el relleno
• Naranja es la frontera
• Rojo es el margen

(La elección de tonos similares de naranja y rojo probablemente no sea la mejor).

Puede ver esto en la sección Métrica de las herramientas de desarrollador (que está oculta de forma predeterminada):

Parámetros del modelo de cuadro CSS (contenido / relleno / borde / margen).

Documentos oficiales: inspeccionar y editar páginas y estilos: examinar y editar parámetros del modelo de cuadro