HTML / CSS：div，anchor和image标记，空格低于

Question

请在将此标记为重复之前阅读完整帖子

我们都熟悉浏览器中恼人的默认代理样式表。我们可能也熟悉烦人的锚点和图像标签，下面有空格。

所以这是我的问题：

HTML ：

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

我使用了一些社交图标进行测试，看起来像这样：

我希望锚点是正方形，所以在我的CSS中我只是说a { display: inline-block; }

但是现在图片下面有一个空格，所以在我的CSS中我说img { display: block }

带有锚标签和图片标签的所有内容现在似乎都很好，但是......

现在div中有一个空格，没有任何证据表明它是锚标记或图像标记。

你可能会想：“这很容易。只需在你的CSS中说div { font-size: 0 }”。那导致另一个问题：div不能很好地测量高度。它会切掉顶部的一个像素：

因此，如果有任何修复方法：如果没有像padding-top: 1px或margin-bottom: ...px

这样的丑陋修复，我将如何解决此问题？

如果没有修复：那会很奇怪

Answer 1

尝试添加a { float:left }或a { vertical-align: middle }

Answer 2

Flexbox效果很好。

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;