我在标签里嵌入标签后，发现标签底部莫名多了一块空白区域。明明已经给和都设置了margin: 0、padding: 0，还给加了display: inline-block，结果还是达不到预期——我想要完全包裹住图片，不能有这块不该有的空白，而且图片尺寸可能会变化，得让能自适应拉伸，还不能用overflow: hidden或者裁剪内容的方式。

问题复现代码 #

CSS代码

a { 
  text-decoration: none; 
  color: inherit; 
  display: inline-block; 
  position: relative; 
  margin: 0; 
  padding: 0; 
  border: 1px solid red; 
} 
img { 
  margin: 0; 
  padding: 0; 
}

HTML代码

<span>
  <a target="_blank" href="#test">
    <img border="0" referrerpolicy="origin" src="http://via.placeholder.com/300/E8117F/ffffff" height="300" width="300">
  </a>
</span>

问题效果展示 #

解决方案 #

其实这个问题的根源是：图片默认是行内元素，会和文本的基线对齐，底部的空白就是基线到文字底线的那小段间距。下面几种方法都能解决问题，完全满足你的需求——不裁剪内容、自适应图片尺寸：

• 方法1：把图片设为块级元素
  给添加display: block，让它脱离行内元素的基线对齐规则，这样就能完美包裹它了：

  img {
    margin: 0;
    padding: 0;
    display: block;
  }
  

• 方法2：修改图片的垂直对齐方式
  不让图片对齐基线，改成对齐底部、顶部或者中间都可以，同样能消除底部空白：

  img {
    margin: 0;
    padding: 0;
    vertical-align: bottom; /* 换成top或middle也有效 */
  }
  

• 方法3：给标签设置行高为0
  行内元素的间距和行高挂钩，把的line-height设为0，就能去掉这块多余的空白：

  a { 
    text-decoration: none; 
    color: inherit; 
    display: inline-block; 
    position: relative; 
    margin: 0; 
    padding: 0; 
    border: 1px solid red;
    line-height: 0;
  }