Jakie narzędzia dla programistów Chrome wyróżniają kolory?

W poprzednich wersjach Chrome narzędzia programistyczne pozwalały na sprawdzanie elementów strony i wyróżniałyby je na niebiesko. Najnowsze wersje Chrome wyróżniają elementy na niebiesko, ale mają także zielone i pomarańczowe obszary.

Co oznaczają kolory?

Kolory reprezentują obszary elementów odpowiadające modelowi pudełkowemu CSS .

• Niebieski to treść
• Kolor zielony jest wypełnieniem
• Orange to granica
• Czerwony to margines

(Wybór podobnych odcieni pomarańczy i czerwieni prawdopodobnie nie jest najlepszy.)

Możesz to zobaczyć w sekcji Metryki narzędzi dla programistów (która jest domyślnie ukryta):

Parametry modelu pola CSS (zawartość / wypełnienie / ramka / margines).

Oficjalne dokumenty: Sprawdź i edytuj strony i style: Sprawdź i edytuj parametry modelu pudełka