Есть ли какой-нибудь инструмент css, отвечающий, как рассчитывается смещение этого конкретного элемента?

Question

Я использую firebug и некоторые CSS-редакторы, но я не знаю, есть ли какие-нибудь инструменты, которые могут дать ответ - как будет рассчитываться смещение этого конкретного элемента?

В общем, иногда я должен анализировать всех родителей элемента с множеством свойств, чтобы знать, почему мой элемент расположен там.

Могу ли я узнать алгоритм, скажем,

margin-top для parent1 + padding-top для parent2 + высота parent3 = результирующая вершина смещения моего элемента?

PS. Я читал о блочной модели в Meier и т. Д. Я не спрашиваю о теории, просто поищу инструмент анализа.

Answer 1

Может быть, вкладка макета может помочь в Firebug? Это на правой стороне рядом со стилем. Там для каждого элемента вы можете увидеть смещение, поле, границу и отступ элемента.

Так что, возможно, вы могли бы просто сложить смещение любых элементов, которые вы ищете.

Answer 2

Я могу придумать упрощенный метод. Я надеюсь, что это поможет:

Используйте следующее внутри тега стиля

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

Это должно отметить все ваши границы и контуры, чтобы сделать видимыми все родительские элементы для вашего интересующего элемента. Наличие как контура, так и границы должно показывать вам эффекты полей и отступов.