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 img
s 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)
精彩评论