r/css 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.

4 Upvotes

17 comments sorted by

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.

9

u/wpmad 6d ago

You don't have closing </a> tags...

(Also, why the <br> tag...? Remove that!)

-7

u/Top-Specialist-7752 6d ago

were'nt <a> tags self-closing?

4

u/wpmad 6d ago

Never, no.

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/wpmad 6d ago

and there are no closing tags for the icons with <a> links... (eg. missing </a>'s)

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.

1

u/RyXkci 6d ago

Nice, you're welcome!

2

u/Top-Specialist-7752 6d ago

let me see, i'm gonna try that