div 或 span 的高度比 img 的高度要多3px。如何解决？

问题：div 或 span 的高度比 img 的高度要多3px

 

如果将一个 img 放在 div 或 span 里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？   代码：

<div class="pic">
      <img src="/images/1.jpg"/>
</div>
<span>
      <img src="/images/2.jpg"/>
</span>

 

原因：

  因为 img 默认是按基线( baseline )对齐的。对比一下图片和右边的 p, q, y 等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高

   

   

解决方案：

 

要去掉空格可以使用 vertical-align: bottom 或将 img 标签变为块级元素。 至于什么是基线，还记得四线三格的英语写字本么？中间第三条线就是基线。

   

 

代码如下：

img{display:block;}
img{vertical-align:bottom;}

上面两种选那种都可以

 

参考文献：

blog.csdn.net/yugang93082…

作者：doubleyong

公众号：bug收集

博客：bugshouji.com (专门解决与收集bug的网站)

 

如果喜欢这篇文章，可以支持一下哟，分享、点赞、在看 走一个，哈哈@_@