doubleyong
管理员
管理员
  • 最后登录2021-02-28
  • 发帖数972
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:429回复:0

[css]div 或 span 的高度比 img 的高度要多3px。如何解决?

楼主#
更多 发布于:2020-12-19 15:54

问题: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;}

上面两种选那种都可以

参考文献:
https://blog.csdn.net/yugang930823/article/details/51055989

如果喜欢这篇文章,可以支持一下哟,分享、点赞、在看 走一个,哈哈@_@
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号