when inspecting a page with firebug, what is the yellow area below the highlighted element?

html css firebug
laramichaels picture laramichaels · Dec 27, 2009 · Viewed 15.5k times · Source

When I am using Firebug in "inspect mode" and the mouse hovers over an html table element, the visible content of my table is highlighted in blue -- like all other elements I have looked at using Firefox. However, there is also an area immediately below the table (past the last row) that gets highlighted in yellow. Does anyone know what that corresponds to? I would like to style the table so that space is not taken up by the table.

Many thanks for any insight

lara

Answer

stivlo picture stivlo · Jul 5, 2012

I didn't find any documentation anywhere, but for reference, I've found empirically:

| Margin  | Yellow     |
| Border  | Brown      |
| Padding | Violet     |
| Content | Light Blue |

Also in the W3C box model, the width and height of an element gives the width of the content of the box, excluding margin, border and padding.

Related questions

Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More
Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM

Like most web developers, I occasionally like to look at the source of websites to see how their markup is built. Tools like Firebug and Chrome Developer Tools make it easy to inspect the code, but if I want to …

Read More
How to debug CSS/Javascript hover issues

I often find myself wanting to debug CSS layout issues that involve DOM changes caused by Javascript in reaction to a hover event or different CSS rules applying due to the :hover selector. Normally, I'd use Firebug to inspect the …

Read More