如何处理inline-block元素之间的空隙和img不对齐问题

Inline-block元素两个bug

1. 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
   标准答案：将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px
   实际工作：使用 block 或 float 或 flex，不要使用 inline-block
2. 两个不同高度的 inline-block 元素无法对齐
   还有一种现象就是 img 元素下面无缘无故多出几像素。
   标准答案：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
   实际工作：使用 float（用了浮动就要清除浮动） 或 flex，不要使用
   代码
   HTML

<div class="txt">
  <span>hello</span>
  <span>everyone!</span>  
  </div>
  <div>
    ![](https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3792600002,3564189886&fm=58)
  </div>

CSS

<style>
    .txt{
      font-size:0;
    }
    .txt>span{
      font-size:14px;
    }
    div{
     border:1px solid;
    }
    div>img{
      display:inline-block;
      vertical-align:bottom;
      
    }
  </style>