When tweaking the CSS of a page I often find myself in a situation in which I want to know about where a specific distance between two elements or the element and the viewport comes from.
This can sometimes be quite hard to find out due to many different factors to consider, namely margins + margin collapsing, paddings, borders, positioning and alignment, display types, spaces inside HTML, and probably more that don’t remember right now.
So, therefore there should be a tool that allows to inspect the space and tells the user where the space comes from.
Here are some ideas how this could be implemented (I didn’t think much about the details yet, it’s just meant to get the ball rolling):
-
Within the Inspector
A special space inspector button could be added allowing to select two elements. The info is then displayed in a special side panel. -
Expand the Measuring Tool
When you measure a portion of the page, which lies between elements, there may be some info displayed directly within the page. (This may require bug 1382452 to be implemented first.) -
New design issues tool
Create a new tool designated for inspecting layout issues like this one.
Good idea? Bad idea? Is there already something requested/planned to help with that issue?
Sebastian