原因:

由于img标签是行内标签,display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行符/空格间隙问题”。

如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的;如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。

 

解决办法:

方法1:把img标签的display属性改成block:

img{dispaly:block;}

方法2:修改img的vertical-align属性:

img{vertical-align:buttom;}
img{vertical-align:middle;}
img{vertical-align:top;}

 

posted on 2020-08-15 15:33  ksy_c  阅读(434)  评论(0编辑  收藏  举报