What can I use to outline HTML elements with visible padding, margin, and borders?

I normally get by quite well using the Chrome Web Developer extension to outline elements, to debug my CSS etc. and when 开发者_Go百科that isn't up to the task, I use the Firefox version (the original, superior version), but what I would really like is a tool that can outline the 'footprint' of an element showing the 'core' element, its padding, its border at real width, and its margins.

Is there such a tool for Chrome, or for Firefox for that matter?

To outline all elements:

* {
  outline: 1px red solid;
}

Chrome dev tools have it all:

You can see the actual size in yellow, margins in the darkest blue, paddings in lighter blue, and actual element in the lightest blue. You can then open console and switch to "Metrics" section to see something similar to "Layout" in firebug.

PS. As ex firebug fanboy for many years I can assure you that Chrome dev tools are actually more powerful than firebug right now, you just need to discover all the features.

Ironically, IE of all browsers has that built in to the dev tools ('layout' when on the HTML tab).

For Firefox, the excellent Firebug has a similar tool (again, HTML tab, 'layout' on the right-hand side).