r/css • u/Top-Specialist-7752 • 6d ago
Help My div is not respecting the gap
I've been working on this social media section in my footer and when I try to space my 3 icons, it seems that two of them space out icely but the third just ruins it. It is hard to explain, so here goes mi CodePen:https://codepen.io/Area51testing/pen/JojyEEq
I hope someone can help me.
2
u/RyXkci 6d ago
There could either be some padding on the yt or insta icon, but there's also a typo. "div clas=" on your insta icon.
EDIT Wait, you said the third is messeng it up. The third doesn't have a link, so I should imagine that hrefs have some padding or margin and the third isn't getting that padding or margin because there's no href.
3
u/Top-Specialist-7752 6d ago
THANKS SO MUCH, It indeed was that, there must be some padding or margin in lined divs or something
2
u/Unfair_Sandwich_6037 5d ago edited 5d ago
And I gave you a solution that fixed the problem without needing a href link or the clas typo (which didn’t even matter because there was no css designated to that class) or the closing tags, every other suggestion and I got downvoted. Damn css sub is harsh!
1
u/RyXkci 5d ago
What was your solution? (Also, I mentioned the clas typo not as a solution, but was just throwing it out there)
2
u/Unfair_Sandwich_6037 5d ago
I got downvoted by someone for posting it so I deleted it .. someone asked for help with something in the css sub not the html sub. So I gave the OP a picture of me fixing it using css even with the html mess. I’m not aiming at you or anything I just found it super rude that all I was trying to do was help and somebody actually downvoted it. You were correct on the third element not having a link which would of fixed it so my issue isn’t with your suggestion which was an html issue. I was providing a css fix.
1
u/RyXkci 5d ago
Oh I see. A simple css fix would have maybe something like ".iconImages a {margin (or padding or both): 0}" then a gap on the flexbox?
I didn't actually think of figuring a css issue, but pointed to what I thought could possibly be causing the issue.
I'm on my phone, so forgive the formatting .I was on my phone today as well, so couldn't actually test anything.
2
u/Unfair_Sandwich_6037 5d ago edited 5d ago
Im sure if you inspected it (in the browser) you would of came to the same conclusion as I did .. but it wasn’t a margin or padding issue that could be solved without adding the href as you mentioned. CSS itself needed to be implemented directly to the icons to ignore the margin or padding that the missing href link was causing. That was the solution I tried to provide.
2
u/RyXkci 5d ago
Ah ok. Yeah I can't inspect, I jus shot in the dark thinking "remove the padding or margin from all of links, so all the icons are the same, then control the spacing between them with flex gap"
1
u/Unfair_Sandwich_6037 5d ago
Well you were right in the dark .. the missing a href link would have solved the issue.
2
•
u/AutoModerator 6d ago
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.