img与div以及两个img之间的缝隙问题

• 有缝隙的原因：
  是由于img标签的display:inline-block属性；
  display:inline-block布局的元素在页面中显示时会出现几像素的间隙。这个原因是编辑代码时，inline-block布局的元素标签不在同一行，之间存在换行符，即“换行 符/空格间隙问题”。还有就是像img这样的内联元素，其默认对齐方式是根据父级的 baseline 进行对齐，对齐的是 baseline，撑开的却是元素整体的高度（bottom line），这样就会造成缝隙。
• 解决方法：

1. 把img标签的display属性改成block；

   img{dispaly:block;}
   

2. 改变img垂直对齐方式：(下面三个其中一个就可以)；

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

3. 把img父级元素div的文字大小设置为0；

   div{font-size:0};
   

4. 可设置浮动float，并清除浮动；
   此方法相对来说稍微麻烦一点儿~~
5. 如果是多个img标签，也可写在一行，从而消除换行符；
   但是此方法会影响html的页面美观效果~~

   <img src="img/about_link_img.jpg" alt="" /><img src="img/about_link_img.jpg" alt="" />
   

如有错误或不足，欢迎各位大佬评论指正。