链接标签内的图片

Question

嗨，我正在创建一个网站，当我将品牌标志放在网页右上角的链接标签中时，遇到了这个问题。

       <a href="#" >
          <img src='img.png'>

       </a>

       img {
           height: 50px;
           width: 50px;
         }

结果是标签包住的图片高度实际上超过了50像素，即使标签中没有文本。但当我添加font-size:0时，它可以正常工作。

所以我需要知道是什么原因导致链接标签占用了更多的高度。

请帮助我理解这些概念，而不仅仅是一些CSS代码。

我有一个示例，请求帮助。 http://jsfiddle.net/amerrnath/TLBEx/ 好的，对不起，我从链接中得到了答案。 White space at bottom of anchor tag 谢谢。

- Amerrnath

---

将图像的垂直对齐方式更改为“top”：默认情况下是“baseline”。之前在SO上进行的搜索可能会有所帮助。 - Fabrizio Calderan

垂直对齐锚点标记没有效果。结果仍然相同。 图像为90px；a标记高度为94px。 - Amerrnath

display: block; 你的图片 - Mr. Alien

https://dev59.com/6XA75IYBdhLWcg3wm6ex - Fabrizio Calderan

Answer 1

将 img 的 display 改为 block

a {
    display:inline-block;
}
a img {
    display:block;
}

看这个jsfiddle

它是做什么的呢？链接内部的图像具有默认的display为inline-block。您将a设置为display:inline-block，加上a元素内的空格，就会出现问题。

您可以使用两个嵌套的inline-blockdiv模拟，只在内部一个上设置尺寸。http://jsfiddle.net/TLBEx/4/

- yunzen

---

它可以运行，即使我把字体大小设为0，但我需要深入了解其概念。 - Amerrnath