display: inline-block产生间隙

最近在学grid布局的的时候，使用若干个div在容器中布局，div都设置为display:inline-block的时候，div之间产生了一些空隙。

<style>
    body {
        margin: 0;
        padding: 0;
    }
    #grid {
        background-color: #D3DCE6;
    }
    #grid>div {
        display: inline-block;
        height: 200px;
        width: 200px;
        background-color: #5d6378;
    }
  </style>


<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

设置为inline的时候，也会出现这种问题

原因：

元素在作为行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决办法：

1. 删除元素之间的空格

这种做法太蠢了。

2. 父元素设font-size为0，子元素自己再设font-size

3. 为每个行内或者行内块元素设置浮动，然后父元素再清除浮动

4. 设置元素的margin为负的字体大小的二分之一

5. 父元素直接display:table

6. 父元素的letter-spacing或者word-spacing设为负的一半字体大小