Orange highlighting in Chrome Developer Tools

Question

When viewing elements in Chrome Developer Tools, the HTML element is typically highlighted blue when hovering over the element with the mouse.

However sometimes there is also an orange region. (See image)

What is the meaning of the orange highlighting? Sometimes it looks like it is a reflection of the parent HTML element. But sometimes it isn't. It just seems so arbitrary, which has got me puzzled.

Answer 1

The colors are the following:

• Orange is Margin
• Yellow is Border
• Green is Padding
• Blue is element width and height

If you ever forget, simply check the computed sidebar for the border-box display.