两个div或是img之间有空隙

今天在工作中遇到一个问题，在img下面有一个div标签，怎么也删不掉那一条空隙，如图所示

image

代码

!DOCTYPE html>


    
    
    
    
    


    
    
    

解决方法

只需要加入font-size: 0; 这个属性就可以去除空隙了。

*{margin: 0;padding: 0;font-size: 0}

原因

img和div都是行内块级元素 ，inline-block 的盒模型都会有文字特性，间距就是由于两个标签之间的空白引起的。