2d • 📚 Resources
Anyone else use "outlines" in CSS to see your elements?
So I was reviewing this website and wanting to understand a little bit more about how the spacing happens to be. If you take a look at this page here
Scroll to the bottom and see the big spacing issue.
Adding this line of code to your CSS has some benefits
- Diagnose Layout Breaks: Spot elements causing horizontal scrolling instantly.
- Visualize Element Boundaries: See margins, padding, and content areas clearly.
- Detect Ghost Spacing: Find hidden padding or margins pushing items away.
- Verify Nesting Structures: Confirm elements sit in their correct parent containers.
And you don't want to use the "border" property
- Zero Added Width: Outlines do not alter element dimensions.
- No Layout Shifting: Elements stay in place when toggling outlines.
- Draws Outside Box: Outlines sit on top of the element box.
- Preserves Box-Sizing: Layout mathematics remain completely untouched.
There used to be a Chrome extension called Pesticide, but it looks like it's no longer being supported. I did find this one:
2
0 comments
Anyone else use "outlines" in CSS to see your elements?
skool.com/the-code-zone
Learn the proper way to build websites with AI that will rank higher in search results. Learn HTML/CSS/JavaScript Basics to further your understanding
Leaderboard (30-day)
1
+32
2
+16
3
+6
4
+5
5
+4
Powered by