The rules for HTML layout are extremely complex, but I have never seen a tool for explaining in detail why elements are layout out the way that they are. I've worked with Firebug and equivalents quite a lot, but they only display calculated sizes - they don't try to explain any of the underlying rules.
Some examples of features such a tool might offer are as follows:
- If an element with position relative, you might be able see where the element would have been positioned if it were not for the relative values
- It might explain that the margin appears less than it you'd expect naively because margin collapsing was applied
- For an element that was uses absolute positioning, it would be nice to know what element was being used as the frame of reference
Do there exist any tools that provide detailed information as to why the rendering engine layed out the elements the way that it did?