当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

14、img图片之间有缝隙的问题处理方案

上传时间:2020-05-20            浏览次数:102

一、现象

大图切成几个小图片进行架构的时候,紧邻的图片之间会有一个缝隙,这个缝隙影响图片之间展示的连续性。

二、原因

根本原因在于img标签为inline元素,该元素默认垂直对齐方式为以父元素的baseline,但是展示时又是以bottomline为对齐方式,因此造成了上下两个img标签之间的间隙。

三、解决方案

(1)img{vertical-align:top;} ----推荐

     改变其垂直对齐方式

(1)img{display:block;}----也是不错的方案

     将其改变为block元素,但是该方法太过粗暴,相当于从根本上改变了img。

(3)div{font-size:0;}----不推荐

     把父元素的文字大小设置为0

永易搜建站用技术和实力说话
0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们