display:inline-block间隙问题

如何让两个块级元素显示在同一行：

在项目中我们有时会使用display:inline-block使两个div显示在同一行，当然也有其他方法使div显示在同一行。

---

问题描述

当使用display:inline-block时，在chorme浏览器中，两个盒子会产生一定像素的间隙，如下图：

<style>
  .inner{
        height: 100px;
        width: 50px;
        border: 1px solid #D7D7D7;
        background-color:#F0F0F0;
        display: inline-block;
       }
       .first_inner{
        height: 100px;
        width: 500px;
        display: inline-block;
        border: 1px solid #D7D7D7;
        vertical-align: bottom;
       }
</style>
     <div>
        <div class="inner">
            <img src="./img/3.1素材.png" alt="">
        </div>
        <div class="first_inner">
            <span></span>
            <p></p>
        </div>    
     </div>

---

原因分析：

例如：换行和空格会占据一定的位置使之产生一定的间隙

---

解决方案：

这里小的改动就是使第二个div和上一个div的代码写在同一行
修改后的代码如下：

 <div>
        <div class="inner">
            <img src="./img/3.1素材.png" alt="">
        </div><div class="first_inner">
            <span></span>
            <p></p>
        </div>    
     </div>

---

修改后的效果如下：