Existe-t-il un outil css, répondant à la façon dont le décalage de cet élément particulier a été calculé?

Question

J'utilise firebug et certains éditeurs CSS, mais je ne sais pas s'il existe des outils qui peuvent donner une réponse - comment le décalage de cet élément particulier sera-t-il calculé?

En général, parfois je devrais analyser tous les parents de l'élément avec beaucoup de propriétés pour savoir pourquoi mon élément est positionné là.

Puis-je trouver un algorythme, disons,

marge haut de Parent1 + padding-top de parent2 + hauteur parent3 = décalage résultant haut de mon élément?

PS. J'ai lu sur le modèle de boîte chez Meier etc. Je ne pose pas de question sur une théorie, je cherche juste l'outil d'analyse.

Answer 1

Je peux penser à une méthode simpliste. J'espère que cela sera utile:

Utilisez les éléments suivants dans la balise de style

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

Cela devrait marquer toutes vos frontières et donne un aperçu faisant tous les éléments parents pour votre élément d'intérêt visible. Avoir à la fois contour et bordure devrait vous montrer les effets des marges ainsi que des rembourrages.

Answer 2

Peut-être l'onglet de mise en page pourrait aider dans firebug? C'est sur le côté droit à côté du style. Pour chaque élément, vous pouvez voir le décalage, la marge, la bordure et le remplissage de l'élément.

Alors peut-être que vous pourriez juste ajouter le décalage de tous les éléments que vous recherchez.