Are there any css tool, answering how the offset of this particular element has been calculated?

Question

I use firebug and some CSS editors, but i don't know are there any tools which can give an answer - how the offset of this particular element will be calculated?

In general, sometimes i should analyze all the parents of element with a lot of properties to know why my element is positioned there.

Can i find out an algorythm, say,

margin-top of parent1 + padding-top of parent2 + height of parent3 = resulting offset top of my element?

PS. I've read about box model at Meier etc. I don't ask about a theory, just look for the analyzing tool.

Answer 1

I can think of a simplistic method. I hope this will be of help:

Use the following inside the style tag

body *{
border:thin solid red;
outline:thin solid green;
}

This should mark all your borders and outlines making all the parent elements for your element-of-interest visible. Having both outline and border should show you the effects of margins as well as paddings.

Answer 2

Perhaps the layout tab could help in firebug? It is on the right side next to Style. There for each element you can see the offset, margin, border and padding of the element.

So maybe you could just add up the offset of whatever elements you are looking for.