Css rems显示，但ems不'；为什么不同？

我在玩一堆社交媒体图标。我的版本

老实说，我以前从未使用过rems（总是在定义根字体大小的框架中使用ems）。我不明白为什么我指定ems时锚元素的大小是0px，为什么它适用于rems。有人能解释一下这是怎么回事吗

html {
  background: #fff;
  box-sizing: border-box;
}

.soc {
  display: block;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 4.8rem;
  text-align: center;
}

HTML

图标
图标
图标

锚定标记的字体大小是0，因此任何0的“em”都是0，这就是为什么没有宽度或高度

因为rem是基于根元素的，所以可以得到一个大小。我用inspector验证了em，一旦你将字体大小添加到锚点而不是0，你就会看到图标

---

我更新了

.soc

字体大小为

10px

你的锚字体大小为0你应该发布一个MCVE（即足够的代码在问题本身中重现问题）。这也不是Sass问题。用代码更新并删除了Sass标签。哦，你说得对。我完全忽略了那里的字体大小属性。。。一定是瞎了。非常感谢。

<ul class="soc">
<li><a>Icon</a></li>
<li><a>Icon</a></li>
<li><a>Icon</a></li>
</ul>