Using CSS to debug strange paddings/margins

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 :

…


This content originally appeared on DEV Community and was authored by Nabil Alamin

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.


This content originally appeared on DEV Community and was authored by Nabil Alamin


Print Share Comment Cite Upload Translate Updates
APA

Nabil Alamin | Sciencx (2021-09-11T21:59:14+00:00) Using CSS to debug strange paddings/margins. Retrieved from https://www.scien.cx/2021/09/11/using-css-to-debug-strange-paddings-margins/

MLA
" » Using CSS to debug strange paddings/margins." Nabil Alamin | Sciencx - Saturday September 11, 2021, https://www.scien.cx/2021/09/11/using-css-to-debug-strange-paddings-margins/
HARVARD
Nabil Alamin | Sciencx Saturday September 11, 2021 » Using CSS to debug strange paddings/margins., viewed ,<https://www.scien.cx/2021/09/11/using-css-to-debug-strange-paddings-margins/>
VANCOUVER
Nabil Alamin | Sciencx - » Using CSS to debug strange paddings/margins. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/11/using-css-to-debug-strange-paddings-margins/
CHICAGO
" » Using CSS to debug strange paddings/margins." Nabil Alamin | Sciencx - Accessed . https://www.scien.cx/2021/09/11/using-css-to-debug-strange-paddings-margins/
IEEE
" » Using CSS to debug strange paddings/margins." Nabil Alamin | Sciencx [Online]. Available: https://www.scien.cx/2021/09/11/using-css-to-debug-strange-paddings-margins/. [Accessed: ]
rf:citation
» Using CSS to debug strange paddings/margins | Nabil Alamin | Sciencx | https://www.scien.cx/2021/09/11/using-css-to-debug-strange-paddings-margins/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts