Using CSS to debug strange paddings/margins

Using CSS to debug strange paddings/margins

Nabil Alamin's photo
Nabil Alamin
·

1 min read

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;
}

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.

TutorialCSSWeb Development