Kevin Powell | CSS gap is NOT a replacement for margins @KevinPowell | Uploaded June 2023 | Updated October 2024, 5 hours ago.
I’ve seen some people completely abandoning margins and turning to using gap for everything, and to me, that’s problematic. Don’t get me wrong, gap is an absolute lifesaver, especially when it comes to spacing out components. What it’s not best for, however, is spacing out regular flow content like text.
So, this isn’t to say that you should never use gap; it’s simply to say, use it for what it’s good at.
🔗 Links
✅ How I decide between using Flexbox and Grid: youtu.be/3elGSZSWTbM
⌚ Timestamps
00:00 - Introduction
00:31 - Using gap to replace margin
02:12 - The problem with consistent spacing and the advantage of margins
03:45 - The places where gap is a life-saver
04:45 - The problem with using gap within components
06:40 - Removing margins in specific places is often easier anyway
07:56 - More good use cases for gap
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I’ve seen some people completely abandoning margins and turning to using gap for everything, and to me, that’s problematic. Don’t get me wrong, gap is an absolute lifesaver, especially when it comes to spacing out components. What it’s not best for, however, is spacing out regular flow content like text.
So, this isn’t to say that you should never use gap; it’s simply to say, use it for what it’s good at.
🔗 Links
✅ How I decide between using Flexbox and Grid: youtu.be/3elGSZSWTbM
⌚ Timestamps
00:00 - Introduction
00:31 - Using gap to replace margin
02:12 - The problem with consistent spacing and the advantage of margins
03:45 - The places where gap is a life-saver
04:45 - The problem with using gap within components
06:40 - Removing margins in specific places is often easier anyway
07:56 - More good use cases for gap
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
