Member Avatar for Bradgl87

I have been creating a website and once I added a link to some of the image I would get a little space at the bottom of everyone that has a link and the ones that are just images are fine. Here is a picture to explain more .. I was told by some people that it was the CSS but I messed around with the CSS for some time and havent found the answer yet. So I was hoping some one could help me get rid of the space.

  • 3 Contributors
  • 3 Replies
  • 129 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Bradgl87

Dani AI

Generated

A tiny gap beneath a linked image is almost always a rendering effect, not a mysterious bug: images are inline-level replaced elements and, by default, align to the text baseline so browsers leave room for character descenders. The "no-space between the image and the closing link" suggestion from (and noted by /@cscgal) removes the extra width caused by a literal whitespace text node and often fixes the problem in Firefox, but Internet Explorer can still show the baseline gap.

Practical fixes (choose the one that suits your layout):

/* make the image a block so no baseline gap */
a img { display: block; }
/* keep it inline but remove the baseline gap */
a img { vertical-align: bottom; }   /* try middle or top if needed */
/* collapse the anchor's line box around the image */
a { line-height: 0; }
/* remove old browser default link border around images */
a img { border: 0; }

Notes and troubleshooting tips: use display:block for standalone images (it removes the gap cleanly). If images sit inline with text or need to sit side-by-side, prefer vertical-align or display:inline-block combined with vertical-align. line-height:0 is a useful quick test but will affect any inline text inside the link. Check DOCTYPE/quirks mode (that can change how browsers compute line boxes) and inspect computed styles with dev tools to see inherited line-height, font-size, or margins that might contribute to the gap.

This set of approaches explains why 's whitespace fix worked in Firefox and why IE required a CSS adjustment; applying one of the CSS rules above will remove the visible space in modern browsers.

Recommended Answers

All 3 Replies

Member Avatar for peter_budo

I am sorry from this image is difficult to say what you are talking about. :confused:
Are you toking about border which is automaticaly apply to image if works as a link or you wish to create some empty surounding space about image, I dont't know. You have to give as better example or better explaination/description of what you are looking for.

Member Avatar for Dani

Does your </a> end right after the <img> tag with no space between the two?

Member Avatar for Bradgl87

ya that seamed to work cscgal for FireFox but for some reason it is the same in Internet Explorer, would you know why that might be ??

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.