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

Question

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:

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

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

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.

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:

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

use `display:block` or `inline-block` to get `a` tag in square — LKG, Jul 25 '17 at 08:02
@caramba yes, that did not solve my problem, as I explained in my question that I put the anchor tags to `display inline-block` and image tags to `display block` There is **no whitespace** below either the image or anchor tag (see the uploaded GIF), but inside the div tag. The answers on *the duplicate answer* did not solve my problen — Derk Jan Speelman, Jul 25 '17 at 08:02
It's old but maybe it help some one. I solved this by setting `a { display: inline-flex; }` for the anchor. — freesh, Sep 29 '20 at 14:14

score 0 · Accepted Answer · edited Jul 25 '17 at 08:10

0

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

edited Jul 25 '17 at 08:10

Derk Jan Speelman

11,291
4
29
45

answered Jul 25 '17 at 07:57

Lime

13,400
11
56
88

That's interesting, now it slices off 1 pixel on the top **and** it still has the whitespace inside the div tag – Derk Jan Speelman Jul 25 '17 at 07:58
@DerkJanSpeelman try the update – Lime Jul 25 '17 at 08:02
`a { float: left }` does do the trick altough I need to wrap it up inside another div tag to align the icons to the center using `text-align: center`, but this does work indeed. `a { vertical-align: middle }` works as well, I discovered – Derk Jan Speelman Jul 25 '17 at 08:04
@DerkJanSpeelman will you accept then please :) – Lime Jul 25 '17 at 08:06
I requested an edit ready to be peer reviewed, than I can accept it – Derk Jan Speelman Jul 25 '17 at 08:08

Gerard · Answer 2 · 2017-07-25T08:16:15.760

0

Flexbox works nice.

div, a {
  display: flex;
  justify-content: center;
}

a:not(:last-child) {
  margin-right: 1em;
}

<div>
  <a href="#">
    <img src="http://placehold.it/100">
  </a>
  <a href="#">
    <img src="http://placehold.it/100">
  </a>
  <a href="#">
    <img src="http://placehold.it/100">
  </a>
</div>

edited Jul 25 '17 at 08:16

answered Jul 25 '17 at 07:59

Gerard

15,418
5
30
52

Thank you for your post, but as I open the devtools I can see there is a whitespace inside the anchor tag. So this is not a fix – Derk Jan Speelman Jul 25 '17 at 08:00
Than we use a nested flexbox. No more whitespace – Gerard Jul 25 '17 at 08:04

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

2 Answers2