浮动时锚点大小增加[重复]

Question

这个问题在这里已有答案：

• Image inside div has extra space below the image 9个答案

图像大小固定为42 * 42。但是如果我们将鼠标悬停在inspect元素中的锚标签上，则大小显示为42 * 46。为什么锚标签的大小会增加？是因为我使用浮动？

<a href="https://www.w3schools.com" 
style="float:left"><img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"></a>

Answer 1

这是因为display和vertical-align的img。在以下作品中设置vertical-align：

<a href="https://www.w3schools.com" style="float:left">
  <img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align: middle;" />
</a>