Inspect Element Colours
14,326 views
Skip to first unread message
The Painted Hive
Feb 16, 2012, 7:34:09 PM2/16/12
to Google Chrome Developer Tools
I am not a developer though am trying to learn a few things. Can
someone please tell me what the screen hover/mouseover colours mean
when I inspect an element in Chrome? For more clarity, I am referring
to the translucent blue, orange and/or green blocks which come up on
the webpage itself when I right click and inspect the element. What
are the different colours classing?
Thanks so much.
someone please tell me what the screen hover/mouseover colours mean
when I inspect an element in Chrome? For more clarity, I am referring
to the translucent blue, orange and/or green blocks which come up on
the webpage itself when I right click and inspect the element. What
are the different colours classing?
Thanks so much.
Peter Beverloo
Feb 16, 2012, 7:43:38 PM2/16/12
to The Painted Hive, Google Chrome Developer Tools
Hi there,
The blue color is the element's "content size", i.e. the area which holds text and/or other elements within it.
The green color is the element's padding, and the orange color is the element's margin.
This corresponds to the CSS Box Model, more about which you can read here:
Peter
Reply all
Reply to author
Forward
0 new messages