解决img底部空白缝隙的问题

Posted 2020-09-30 飞哥100

商城的产品详情页面出现了，图片之间有一条空白缝隙的问题，代码如下：

<p><img src="http://www.***.com/includes/ueditor/php/../../../bdimages/upload1/20170729/1501309833310043.jpg" style="float:none;" title="88095_01.jpg"/></p>
<p><img src="http://www.***.com/includes/ueditor/php/../../../bdimages/upload1/20170729/1501309837181680.jpg" style="float:none;" title="88095_02.jpg"/></p>
<p><img src="http://www.***.com/includes/ueditor/php/../../../bdimages/upload1/20170729/1501309839881161.jpg" style="float:none;" title="88095_03.jpg"/></p>

再调试的时候，加入如下代码：

p,img{
    margin:0;
    padding:0;  
}

依然有空白缝隙，该游览器在基于appcan平台开发的app中内置的游览器，感到很奇怪，经过一番研究，解决方法如下：

img{
  vertical-align: bottom;  
}
或者
img{
  float:left;
}

原来底部间隙的原因是因为行内元素默认的垂直对齐方式为baseline造成的字体下方会有间隙，默认的是：vertical-align: baseline，才导致的；

参考资料：http://www.jianshu.com/p/e7373c2bbef1