两个元素的display设置成inline-block会出现中间有间隔的问题

两个元素的display设置成inline-block会出现中间有间隔的问题，部分html如下

            

                
                
            
            

              

                  
                  {{seller.name}}
              
              

                  {{seller.description}}/{{seller.deliveryTime}}分钟送达
              
              
              
              

                  
                  {{seller.supports[0].description}}
              
            

css如下（用stylus语法书写）

.content-wrapper
      padding:24px 12px 18px 24px

      .avatar,.content
        display:inline-block
       

界面显示如下.avatar和.content之间有一个间隔

解决的方法是在父元素的样式上加上“font-size:0”

改写的部分的css如下所示

.content-wrapper
      padding:24px 12px 18px 24px
      font-size:0
      .avatar,.content
        display:inline-block
       

父元素加上font-size:0之后，界面的显示效果如下

此时.content中的文字不见了，这是因为子元素继承父元素的font-size:0，只要在.content中设置font-size:14px就ok了，修改后的部分css如下所示

.content-wrapper
      padding:24px 12px 18px 24px
      font-size:0
      .avatar,.content
        display:inline-block
      .content
        font-size:14px

修改之后，在浏览器中显示的效果如下