为什么 html 里写的空格实际效果差那么多

Question

我需要插入一些空格，我用的是下面这个，

 ，它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

代码如下：

        <div class="asset-meta">
            <i class="fa fa-user"></i>&thinsp;<?php $this->author(); ?>&thinsp;&thinsp;&thinsp;
            <i class="fa fa-calendar"></i>&thinsp;<?php $this->date('Y-m-d'); ?>&thinsp;&thinsp;&thinsp;
            <i class="fa fa-tags"></i>&thinsp;<?php $this->category(', '); ?>
        </div>

我的 em 是 16px，在 windows chrome 上显示是正常的，如下，

但是我在 mac chrome 上看到的空格大了很多，如下，

地址在：www.ethsonliu.com

请问这是怎么回事啊？

Answer 1

不同的字体造成的，可以试试等宽字体，不过多数不好看。要彻底解决，只能用 margin/padding 之类的属性。

Answer 2

既然都是chrome了 那应该是不同字体的问题
嫌弃的话就用css来搞呗，不用那几个空格字符实体。

.asset-meta i{
  display:inline-block;
  margin-right:2em;
}

（叨叨 你有点强迫症）