David Ojeda

How to Find Ghost CSS Elements

How to Find Ghost CSS Elements

David Ojeda's photo
David Ojeda
May 11, 2018·

1 min read

I recently came across a bug on our landing page which caused a weird blank space overflow on the right side:

Landing page with extra white space on right side

I looked for a couple of hours trying to find any CSS spacing causing it, or some wrong element on my HTML, but couldn't find anything out of place. The blank space wasn't even inside the <html> element of the page 🧐

I then stumbled upon this post and rapidly found the problem. This blog post suggests some CSS styles to make ghost elements visible 👻:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Now, I could find the section that was causing the problem:

Landing page with ghost elements visible

In the end, it was a matter of fixing some mismatching HTML elements.

Would've had this CSS styles helping me debug from the beginning, could've saved me a couple hours of work 🤦🏻‍♂️