Quelles sont les couleurs de mise en évidence des outils de développement Chrome?

Dans les versions antérieures de Chrome, les outils de développement vous permettaient d'inspecter les éléments de page et les surlignaient en bleu. Les versions récentes de Chrome mettent en évidence les éléments en bleu, mais comportent également des zones verte et orange.

que signifient les couleurs?

Les couleurs représentent les zones des éléments correspondant au modèle de boîte CSS .

• Le bleu est le contenu
• Le vert est le rembourrage
• Orange est la frontière
• Le rouge est la marge

(Le choix de nuances similaires d’orange et de rouge ne sont probablement pas les meilleurs.)

Vous pouvez le voir dans la section Métriques des outils de développement (qui est masquée par défaut):

Paramètres de modèle de boîte CSS (content / padding / border / margin).

Documents officiels: Inspecter et modifier les pages et les styles: Examiner et modifier les paramètres du modèle de boîte