解决img和div高度不同的问题以及iconfont设置line-height仍然不居中

解决方案（任选一种）：

1. div设置 font-size：0；

2. img设置 display：block；

3. div设置 display：flex；

4. img设置 vertical-align: middle;

 

原因：
The white space displayed below image elements in HTML is often cause for confusion, but there is a logical explanation: Images are inline elements, and inline elements have descenders.

链接

img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会变高

 

iconfont设置line-height不居中

可以设置父类flex align-items: center; 然后把iconfont display:block; 这样可以解决

下面方法有时可以有时不可以

在设置iconfont的元素设置 

.iconfont {
    vertical-align: middle;
}

 如果不居中就在父元素中使用flex

display: flex;
      align-items: center;
      justify-content: center;