The console.log() of css
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about unexpected white space or overflow, since it shows how to reveal every element's box with a one-line rule.
Recommended by 3 people across 3 different months, 2022 to 2025.
What it is
A under-one-minute YouTube Short by Kevin Powell showing a quick CSS debugging trick: apply a translucent background (or outline) to every element so overlapping boxes and overflowing content become visible. He frames it as the CSS equivalent of console.log().
What people said
Recommends Purplejacket · 2022-06 · Stack Overflow · on “How can I outline the elements of an HTML page in the browser to see the layout of the boxes? Modify the user agent style sheet?”
Another useful concept came up this year, 2022: * { background: rgb(0 100 0 / 0.1) !important; } The idea is that every element gets a certain amount of coloring so that we can visually determine how much overlapping space there is because multiple overlaps will become darker. It will look like this: [LINK] The technique reveals that there is excess space on the right hand side of the card 1 h2 tag. The above image was authored by Kevin Powell on his codepen. [LINK] He describes the whole concept in a very cogent YouTube video called The console.log of CSS [this video] which is under a minute long.
Recommends mjwebson · 2022-07 · Stack Overflow · on “Mysterious white space on the right of my left when I scroll to the right”
Well done for finding the solution yourself. I did happen to find a good little tip from Kevin Powell today on Youtube: [this video] He suggests adding * { background: rgba(0,255,0,0.2) } to your css, this can help see all the overlapping elements visually. I'll definitely be trying that next time I run into a similar problem, and I hope it can help you too.
Recommends Ori Drori · 2025-04 · Stack Overflow · on “What is causing the overflow?”
There's a nice trick to detecting overflows [this video] I've learn from Kevin Powell - you set an outline on all elements: *, *::before, *::after { outline: 3px solid green; Now you can clearly see that some of your <pre><code> elements are overflowing, and as suggested by Kostas Minaidis [LINK] , you should always apply this rule (move outside of media query): pre { white-space: pre-wrap; } Check the overflowing elements: *, *::before, *::after { outline: 3px solid green; box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #F1EFEC; } .main-section { padding: 1.5%; letter-spacing: .045rem; } #navbar li { color: #030303; } ul, li { list-style: none; } a { text-decoration: no