Question from Software Recommendations on Stack Exchange:
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?
My answer
[Read, comment, and vote on my answer at Stack Exchange]
I use Google Chrome for all of my debugging, so if Firefox has equivalent features, I do not know about them.
You can accomplish most of your goals using Chrome’s Elements panel (hit F12 from any webpage). Find the style element that you think might be part of the problem, uncheck the box next to it or modify the value and Chrome will render the page with the new values. That method would likely solve your first example.
For your second example, click on the computed tab. It will show you all of the rules that could have been applied and will mark out the rules that were not applied. If “margin collapsing” were somewhere in the style-chain, then it would show up on this list.
For your third example, when you have an element selected, look at the bottom of the console. It shows the full list of nested elements leading to the selected element. With that information, you should be able to deduce what parent element is the reference.
