Was sind die Chrome-Entwickler-Tools, die Farben hervorheben?

In früheren Chrome-Versionen konnten Sie mit den Entwicklertools Seitenelemente überprüfen und sie blau hervorheben. Aktuelle Versionen von Chrome heben Elemente in Blau hervor, haben aber auch grüne und orangefarbene Bereiche.

Was bedeuten die Farben?

Die Farben repräsentieren die Bereiche der Elemente, die dem CSS-Box-Modell entsprechen .

• Blau ist der Inhalt
• Grün ist die Polsterung
• Orange ist die Grenze
• Rot ist der Rand

(Die Wahl von ähnlichen Orange- und Rottönen ist wahrscheinlich nicht die beste.)

Sie können dies im Abschnitt " Metriken " der Entwicklertools sehen (der standardmäßig ausgeblendet ist):

CSS-Box-Modellparameter (Inhalt / Abstand / Rahmen / Rand).

Offizielle Dokumente: Untersuchen und Bearbeiten von Seiten und Stilen: Untersuchen und Bearbeiten von Boxmodellparametern