inline-block空隙之css letter-spacing与字体大小/字体关系数据表

一、inline-block空隙

当使用inline-block元素时，其间会出现一定的空隙，这个空隙的产生是由于HTML中换行符和空格符等的缘故。因此，为了去除inline-block之间的空隙，我们可以做如下的处理：

1.设置父元素的font-size=0

.parent {
  font-size: 0;
}

.child {
  display: inline-block;
  /* 这里的font-size需要重新设置，否则后代元素的字体会变为0 */
  font-size: 16px;
}

2.消除inline-block间隙的第二种方式是设置父元素的letter-spacing属性与font-size属性关系。

二、css letter-spacing与字体大小/字体关系数据表

我们可以通过下面这份“CSS letter-spacing与字体大小/字体关系数据表”来调整letter-spacing的数值。

字体大小	字体	letter-spacing
12px	宋体、新宋体	0.5px
12px	微软雅黑,楷体,仿宋, 黑体	1.5px
14px	Arial, Helvetica, sans-serif, Tahoma, M$	1.5px
16px	Times New Roman,serif等	2.5px

示例一：

<div class="parent">
  <div class="child">Hello</div>
  <div class="child">world</div>
</div>

.parent {
  font-size: 0;
  letter-spacing: -0.31em;
}

.child {
  display: inline-block;
  /* 这里需要重新设置字体大小 */
  font-size: 16px;
  letter-spacing: normal;
}

示例二：

<div class="parent">
  <div class="child">Hello</div>
  <div class="child">world</div>
</div>

.parent {
  font-size: 0;
  letter-spacing: 2.5px;
}

.child {
  display: inline-block;
  /* 这里需要重新设置字体大小 */
  font-size: 16px;
  letter-spacing: normal;
}

通过以上的示例，我们可以发现，“CSS letter-spacing与字体大小/字体关系数据表”是非常实用的，我相信它一定会为我们CSS布局带来便利。