79 votes

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

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

Que signifient les couleurs ?

enter image description here

69voto

Ben Collins Points 11318

Les couleurs représentent les surfaces des éléments correspondant aux Modèle de boîte CSS .

  • Le bleu est le contenu
  • Le vert est le rembourrage
  • L'orange est la frontière
  • Le rouge est la marge

(Le choix de nuances similaires d'orange et de rouge n'est probablement pas le meilleur).

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

enter image description here

29voto

DurkoMatko Points 291

Mise à jour 2021

La zone en pointillés violets est également affichée maintenant. Elle représente l'espace disponible pour l'expansion :

enter image description here

voir ici

1voto

Nils von Barth Points 231

Paramètres du modèle de boîte CSS (contenu/adhérence/bordure/marge).

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

SistemesEz.com

SystemesEZ est une communauté de sysadmins où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres sysadmins, poser vos propres questions ou résoudre celles des autres.

Powered by:

X