Using CSS to debug strange paddings/margins

Nabil Alamin - Sep 11 '21 - - Dev Community

This is something I learnt recently while working on makerflow (shameless plug 🤷‍♂️).

Anyway, I was having this strange padding issue which was caused by some animation which I didn't know at first because the inspector wasn't finding it :

image.png

image.png

Solution ✔:

So after some googling I came across this code:

/* PLACE IN YOUR index.css or whatever your root styling file is*/
*{
  outline: 1px solid #f00 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
Enter fullscreen mode Exit fullscreen mode

And it helped me find where the bug was coming from and move on to other things:

image.png

👋

This could be pretty useful in some instances. Anyway, I hope you find this helpful, bye.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .