Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

In past versions of Chrome, the developer tools allowed you to inspect page elements and would would highlight them in blue. Recent versions of Chrome highlight elements in blue, but also have green and orange areas as well.

What do the colors mean?

enter image description here

share|improve this question

1 Answer 1

up vote 18 down vote accepted

The colors represent the areas of elements corresponding to the CSS box-model.

  • Blue is the content
  • Green is the padding
  • Orange is the border
  • Red is the margin

(The choice of similar shades of orange and red are probably not the best.)

You can see this in the Metrics section of the developer tools (which is hidden by default):

enter image description here

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.