css - rems 显示但 ems 不显示 - 为什么不同？

Question

我在玩弄 Ruandre's excellent codepen社交媒体图标集。 Here's我的版本。

老实说，我以前从未使用过 rems(总是在定义根字体大小的框架内使用 ems)。我不明白为什么当我指定 ems 时我的 anchor 元素的大小为 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

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

Answer 1

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

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

http://codepen.io/anon/pen/mVdgbo

我更新了 .soc 使其字体大小为 10px