Quali sono i colori di evidenziazione degli strumenti di sviluppo di Chrome?

Nelle versioni precedenti di Chrome, gli strumenti per sviluppatori ti consentivano di ispezionare gli elementi della pagina e li evidenziavano in blu. Le versioni recenti di Chrome evidenziano gli elementi in blu, ma hanno anche aree verdi e arancioni.

Cosa significano i colori?

I colori rappresentano le aree degli elementi corrispondenti al modello box CSS .

• Il blu è il contenuto
• Il verde è l'imbottitura
• Orange è il confine
• Il rosso è il margine

(La scelta di sfumature simili di arancione e rosso non è probabilmente la migliore.)

Puoi vederlo nella sezione Metriche degli strumenti per sviluppatori (che è nascosto per impostazione predefinita):

Parametri del modello di casella CSS (contenuto / riempimento / bordo / margine).

Documenti ufficiali: ispeziona e modifica pagine e stili: esamina e modifica i parametri del modello di casella