Jak zdebugować "dziwne" zachowanie CSS/JS ? (konkretny przykład)

Czołem! Jako "niedzielny" webmaster muszę czasami, przy niedzieli, pogrzebać trochę na frontendzie (boli..).

Mam taką sytuację - dodałem sobie przycisk do jednego z istniejących div'ów. Teoretycznie wszystko już sobie poustawiałem zgodnie z założeniami, aż tu nagle widzę, że moja zmiana wpływa na elementy (div'y) poniżej "drzewka" html. Ma to taki objaw, że w momencie pojawia i znikania się przycisku, widać delikatny ruch (przesunięcie) innych div'ów..

Słabo to wygląda. Jak można coś takiego szybko zdebuggować? Kombinowałem już z marginami i paddingami w różnych miejscach, ale tylko flustracja narasta.. :/

Gif prezentujący opisaną wyżej sytuację:
(przycisk pojawiający się koło gwiazdek przesuwać napis "źródło opinii")

Będę wdzięczny za wskazówki, jak coś takiego szybko zlokalizować i rozwiązać ;)
pozdr!

Kombinowałem już z marginami i paddingami w różnych miejscach pewnie o to chodzi, zobacz w chrome na focus/hover co tam się dzieje dokładnie.

Pokaż to na żywca.

@czysteskarpety, @Freja Draco - chyba znalazłem rozwiązanie. Nie wiem czy nie będzie to czasami rzutować na inne rzeczy, ale zauważyłem że przerwy (padding, margin) pomiędzy tagami (div, p) jest oparta o em. Zmieniłem to na wartości z px i teraz nie ma dziwnych przesunięć.. Wyszła pewnie moja "niedzielność" w temacie, bo doczytałem właśnie zdanie, że *em *przekształcane jest "na bieżąco" na stronie.

ps. @Freja Draco - z chęcią bym od razu pokazał przykład na stronie zamiast robić gifa, ale zmiany mam tylko u siebie lokalnie..

Jak można coś takiego szybko zdebuggować?

Narzędzia deweloperskie w przeglądarce?

adamerot napisał(a):

ps. @Freja Draco - z chęcią bym od razu pokazał przykład na stronie zamiast robić gifa, ale zmiany mam tylko u siebie lokalnie..

https://jsfiddle.net/