CODEWITHSUNDEEP
htmlcss
AJcodez
AJcodez

Reputation: 34216

weird dash looking thing due to anchor tag

There is this weird looking dash thing in the listed elements just to the right of the image, and I can't figure it out for the life of me, but it goes away when I take out the <a> tags.

Any idea what is causing it?

Upvotes: 1

Views: 457

Answers (1)

Guffa
Guffa

Reputation: 700640

That's the regular underlining of links. Specifically, it's the white space after the image tag that gets underlined.

You can add the style text-decoration: none; to the links to remove the underlining:

.team-list-item a { text-decoration: none; }

Alternatively you can write the div right after the img tag to remove the white space, or you can make the image a block element floating to the left:

.team-list.item img { float: left; }

However, the last two alternatives will change the layout somewhat as it reduces the space to the right of the image. On the other hand, you may want to do that, and adjust the space with a margin or padding, as that gives a more stable layout than using space characters for spacing.

Upvotes: 4

Related Questions