inline-block元素间默认空白间隙问题

有时候为了布局需要，我们需要把一些块状元素的display属性设置为inline-block，让它们在一行排列，如下代码：

<style>
    .parent{
      width: 200px;
      height: 60px;
      border: 1px solid pink;
    }
    .parent div{
      display: inline-block;
      box-sizing: border-box;
      width: 30px;
      border: 1px solid;
      font-size: 15px;
    }
  </style>

<div class="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>

运行结果如下图
虽然4个块状子元素排在了一行，但是子元素之间却有空隙！
产生空隙的原因是：HTML中的换行符、空格符、制表符等空白符，在字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

消除inline-block之间的空隙有下面几种常用方法：

1.父元素的font-size设置为0，子元素的font-size设置为实际大小。

    .parent{
      width: 200px;
      height: 60px;
      border: 1px solid pink;
      font-size: 0;
    }
    .parent div{
      display: inline-block;
      box-sizing: border-box;
      width: 30px;
      border: 1px solid;
      font-size: 15px;
    }

运行结果
2.在父元素中调整letter-spacing的负值，直到没有空隙为止（不同浏览器显示效果不完全一致，不推荐使用这种方法）。

 .parent{
      width: 200px;
      height: 60px;
      border: 1px solid pink;
      /* font-size: 0; */
      letter-spacing: -4px;
    }
       .parent div{
      display: inline-block;
      box-sizing: border-box;
      width: 30px;
      border: 1px solid;
      font-size: 15px;
    }

结果如下