Victor's Blog

Live as if you were to die tomorrow. Learn as if you were to live forever


The color coding of Google Chrome Inspect Element.

In Google Chrome, the developer tools allowed you to inspect page elements and would highlight them in blue in html. It will also highlight elements in different colors like this below.


Now what do these different color mean?

Google chooses these colors corresponding to the W3 CSS box-model

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

You can see this in the Metrics section of the developer tools 


blog comments powered by Disqus