Derk Jan Speelman Derk Jan Speelman - 3 years ago 128
CSS Question

HTML/CSS: div, anchor and image tag with space below

please read the full post before marking this as a duplicate

We're all familiar with the annoying default agent stylesheet from browsers. We're probably also familiar with the annoying anchor and image tags with whitespace underneath it.

So here's my issue:

HTML:

<div>
<a href="#">
<img src="src">
</a>
<a href="#">
<img src="src">
</a>
<a href="#">
<img src="src">
</a>
</div>





I used some social icons for test purposes and it looks like this:

enter image description here




I want the anchor to be a square, so in my CSS I simply say
a { display: inline-block; }


enter image description here




But now there's a whitespace underneath the image, so in my CSS I say
img { display: block }


enter image description here




Everything with the anchor tag and image tag seems to be fine now, but...

Now there's a whitespace inside the div, without there's any evidence it's either the anchor tag or the image tag.

enter image description here




You might think: "well that's easy. Just say
div { font-size: 0 }
in your CSS". Well that causes another issue: the div does not measure the height very well. It slices off one pixel on the top:

enter image description here




So if there are any fixes: how would I fix this without ugly fixes like:
padding-top: 1px
or
margin-bottom: ...px


If there are no fixes: that would be weird

Answer Source

Try adding a { float:left } or a { vertical-align: middle }

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download