开发者

links with thumbnails, floated have some whitespace beneath them. How to get rid of it?

I have a simple thumbnail gallery with images floated to the left:

<a href=".."><img src=".." /></a>

However there appears to be some whitespace that isn't margin nor padding on the bottom of each link (or image). What could be the cause? How can I get rid of it?

Edit: I have set line-height to 1. This seems to get rid of 开发者_Python百科most of it, however there still is a 1px space at the bottom of each image.

Edit: Adding display:block to the images seems to have solved the issue.


Edit: Adding display:block to the images seems to have solved the issue.

That works. Another fix is vertical-align: top.

The "whitespace" is actually the gap reserved for descenders in letters like g and j, because the imgs are inline elements.


  • Try setting the document to XHTML transitional
  • Try adding a <br/> right before the </a>


it is likely the font size spacing that the browser applies try making the image and anchor display block, then the margin and padding we work ( this is a fairly new way for FF to apply line height)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜