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

54

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?

ingrese la descripción de la imagen aquí

Synetech
fuente
1
Para esto vine: azul # 9FC4E7 verde # C2DDB6 naranja # F8CB9C
multiplicación rápida

Respuestas:

54

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):

ingrese la descripción de la imagen aquí

Synetech
fuente