RESOLVED FIXED 22533
different color for margin and padding in the Web Inspector 
https://bugs.webkit.org/show_bug.cgi?id=22533
Summary different color for margin and padding in the Web Inspector
Vincent van den Heuvel
Reported 2008-11-27 13:26:20 PST
It would be very nice to have a different color for margin and padding in the Web Inspector, like Firefox does (only mac style)
Attachments
Firebug element highlighting (236.54 KB, image/png)
2011-01-21 10:18 PST, Bart S. 		no flags
Details
Inspector element highlighting (178.45 KB, image/png)
2011-01-21 10:18 PST, Bart S. 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Bart S.
Comment 1 2010-02-02 10:32:02 PST
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.
Bart S.
Comment 2 2011-01-21 10:18:39 PST
Created attachment 79757 [details] Firebug element highlighting
Bart S.
Comment 3 2011-01-21 10:18:59 PST
Created attachment 79758 [details] Inspector element highlighting
Bart S.
Comment 4 2011-01-21 10:19:51 PST
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.
Bart S.
Comment 5 2011-01-21 10:25:28 PST
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...)
Blaze Burg
Comment 6 2014-01-12 15:41:14 PST
This is included in the new inspector. Cheers!
Note You need to log in before you can comment on or make changes to this bug.