首页 > 其他 > 详细

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

时间:2017-08-01 18:37:35      阅读:269      评论:0      收藏:0      [点我收藏+]

技术分享

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

<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

 

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

原文:http://www.cnblogs.com/feiying100/p/7269955.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!