It would be very nice to have a different color for margin and padding in the Web Inspector, like Firefox does (only mac style)
To add to this, it would be nice if nothing got additional borders (besides borders themselves changing color, so I know they belong to that element). It ends up making it less obvious what the boundaries of the element and its margin/padding are with the extra pixels around them. And it also makes it hard to see when an element does have a border specified. This is my #1 pet-peeve about Inspector over Firebug. I never feel comfortable using it for visual things because the boundaries of things feel imprecise and ambiguous.
Created attachment 79757 [details] Firebug element highlighting
Created attachment 79758 [details] Inspector element highlighting
I just downloaded a new nightly build and am surprised this is still not addressed. I attached screenshots showing the difference between Firebug and Inspector's element highlighting. In Firebug, the yellow is a margin (in this case negative top margin) and the purple is the padding. The boundaries of the element and its margins/padding/border are much clearer with the different colors and not having Inspector's outlines that make the element look a pixel wider than it really is.
Comment on attachment 79757 [details] Firebug element highlighting (Just a minor FYI, the same element in this screenshot is highlighted as in attachment 79758 [details]. I accidentally took this screenshot with the <a> selected but the highlights are for <header> like in the other screenshot. I don't have the option to swap out this image in Bugzilla in case that adds confusion...)
This is included in the new inspector. Cheers!