Nas versões anteriores do Chrome, as ferramentas do desenvolvedor permitiam que você inspecionasse os elementos da página e os destacaria em azul. As versões recentes do Chrome destacam elementos em azul, mas também têm áreas verdes e laranjas.
O que as cores significam?
As cores representam as áreas dos elementos correspondentes ao modelo de caixa CSS .
(A escolha de tons semelhantes de laranja e vermelho provavelmente não é a melhor.)
Você pode ver isso na seção Métricas das ferramentas do desenvolvedor (que fica oculta por padrão):
Parâmetros do modelo de caixa CSS (conteúdo / preenchimento / borda / margem).
Documentos oficiais: Inspecionar e editar páginas e estilos: examinar e editar os parâmetros do modelo de caixa