Healthcare is a right

Posted: 29 December 2014
Updated: 16 December 2017

Tool for explaining HTML layouts

Stack Exchange

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:

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.

Pages tagged with: