FontAwesome 图标和 A 标签之间的 space 是从哪里来的？

Question

实时页面：http://xrsand.com/index.php?option=com_k2&view=item&layout=item&id=92&Itemid=305

每一个马赛克在图像下面都有两条线，每条线前面都有一个FA图标。第一行是 link，第二行是纯文本。我正在使用 fa-fw 来保持图标大小相同并对齐文本。但是图标和A标签之间好像有一个白色的space是怎么来的，为了保持文字对齐，我不得不在图标和标签之间手动添加一个space第二行的文本。出于演示目的，我省略了第一个马赛克的 space，您可以看到其中的文本未对齐。我想我以前遇到过这个问题，那是没有 FA，我记得它涉及 span 之间的一些神秘的 space，但我无法重现该场景。所以这可能与FA无关。

Answer 1

问题是您在呈现内容时使用的缩进。它被浏览器视为单个 space：

<h2 class="sprocket-mosaic-title"><i class="fa fa-newspaper-o fa-fw"></i>
                <a href="/index.php?option=com_k2&amp;view=item&amp;id=90:2015-02-05-15-33-34&amp;Itemid=305">                      同圆共享中国梦                 </a>                </h2>

尝试在呈现页面时将其删除，并将 <i> 标签与 <a> 标签放在一起。它应该可以解决问题。

<h2 class="sprocket-mosaic-title">
     <i class="fa fa-newspaper-o fa-fw"></i><a href="/index.php?option=com_k2&amp;view=item&amp;id=90:2015-02-05-15-33-34&amp;Itemid=305">同圆共享中国梦</a>
</h2>

当您向内容添加许多 space 时也会发生同样的情况：

   <a href="anything">         It will be rendered with a single space</a>

FontAwesome 图标和 A 标签之间的 space 是从哪里来的？

where does the space between a FontAwesome icon and an A tag comes from?

css

font-awesome