The rules for HTML layout are extremely complex, but I have never seen a tool fo

Question

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?

Explanation / Answer

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.

Related Questions

Navigate

• Browse (All)
• Browse T
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.