Can Chrome Dev-tools show the source or reason for an element's size?

Question

When an element is selected in the Elements window in Chrome Developer Tools (as of Chrome 63), the Computed tab will show the current computed width and height, and any other non-default properties.

However as far as I can tell, it doesn't describe, explain or reveal the source or reason for an element's box's size if its size is not due directly to a directly set property, or property inheritance or cascade.

Consider this example:

<div id="div1">
    <p id="p1">Lorem ipsum</p>
</div>

With the default HTML5 stylesheet (i.e. div, p { display: block;}) Chrome will show the computed widths and heights of #div1 and #p1 are the same, but nowhere does it say that the height of #div1 is caused by #p1, nor that #p1's height is caused by its content (also taking into consideration line-height, font-size and other related properties).

If the stylesheet is changed to this:

#div1 { height: 500px; }
#p1 { height: 75%; overflow: hidden; }

...then the Developer Tools window should provide some indication that #div1's height comes directly from the height: 500px; property while #p1's height now originates from #div1 and not its content anymore.

Does this functionality exist in Chrome Developer tools or even a JavaScript tool?

Answer 1

There is a down triangle you can click and see where the computed value is from. I don't think you will be able see all the parent container's settings.