display:inline-block元素之间空隙的产生原因和解决办法

空隙产生的原因

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

推荐方法

• 方法1：为父元素中设置font-size: 0，在子元素上重置正确的font-size

<div class="parent" style="font-size: 0px">
  <div class="child" style="font-size: 16px">child1</div>
  <div class="child" style="font-size: 16px">child2</div>
</div>

• 缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。 增加了代码量。
• 方法2：最优解，设置父元素，display:table和word-spacing

.parent{
  display: table;
  word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/
}

原文链接：本文为CSDN博主「Hayley2016」的原创文章