Які інструменти для розробників Chrome виділяють кольори?

У попередніх версіях Chrome інструменти для розробників дозволяли вам перевіряти елементи сторінки та виділяли їх синім кольором. Останні версії Chrome виділяють елементи синього кольору, але також мають зелені та помаранчеві області.

Що означають кольори?

Кольори представляють області елементів, що відповідають коробці-CSS-моделі .

• Синій - це зміст
• Зелений - підкладка
• Помаранчевий - це межа
• Червоний - це маржа

(Вибір подібних відтінків оранжевого та червоного, мабуть, не найкращий.)

Ви можете побачити це в розділі « Метрики» інструментів для розробників (який приховано за замовчуванням):

Параметри моделі CSS box (вміст / набивання / межа / межа).

Офіційні документи: Огляньте та редагуйте сторінки та стилі: Вивчіть та редагуйте параметри моделі поля