lovelmh13 / myBlog

个人博客 记录菜狗的学习之路
6 stars 0 forks source link

使用img当背景,下面有一个几px的白条 #39

Open lovelmh13 opened 4 years ago

lovelmh13 commented 4 years ago

原因

由于img是行内标签造成的

默认对其方式为vertical-align: baseline(基线对齐) 。图片默认的垂直对齐方式是基线,基线的位置与字体相关,所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 会造成这个空隙的高度大小。

办法

  1. 改成块级元素
  2. 加上vertical-align middle属性

参考

img标签底部总是留有一条白色空隙