为何包裹图片的<a>标签会改变元素尺寸？

问题根源 #

你遇到的问题主要来自两个方面：

• 原正常代码里的img带有float-left类，这个类让元素脱离文档流，规避了行内元素默认的基线对齐额外空间；而异常代码里的img去掉了这个类，同时a标签作为行内元素，默认高度会包含基线下方的空白区域，导致a元素高度被拉到40px。
• 浏览器对a标签有默认样式（比如默认行高、内外边距），也会让a元素尺寸超出内部img的大小。

解决方案 #

以下几种方法都能解决问题，按需选择即可：

1. 补回float-left类

把float-left类加到a标签上（或继续保留在img上），让a元素脱离文档流，消除额外高度：

<a href="<URL>" className='float-left'>
  <img 
    className='invert' 
    src='/static/github.svg'
    height="25" 
    width="25"
    alt="github logo"
  />
</a>

2. 将a标签设为inline-block

行内元素a默认不会贴合内部元素尺寸，改成inline-block后，a的尺寸会完全匹配img的大小：

<a href="<URL>" style="display: inline-block;">
  <img 
    className='invert' 
    src='/static/github.svg'
    height="25" 
    width="25"
    alt="github logo"
  />
</a>

3. 重置a标签的默认样式

消除浏览器给a标签的默认内外边距和行高，避免额外空间：

<a href="<URL>" style="margin: 0; padding: 0; line-height: 0;">
  <img 
    className='invert' 
    src='/static/github.svg'
    height="25" 
    width="25"
    alt="github logo"
  />
</a>

4. 调整垂直对齐方式

给a标签或img添加垂直对齐样式，让图片在a标签内居中，同时消除基线空白：

<a href="<URL>" style="vertical-align: middle;">
  <img 
    className='invert' 
    src='/static/github.svg'
    height="25" 
    width="25"
    alt="github logo"
  />
</a>

内容的提问来源于stack exchange，提问作者vsharma14