【CSS】div和img之间有间隙的原因及解决办法

原因：

由于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;}

 

 

附：转载链接：https://www.cnblogs.com/vanstrict/p/4961300.html