FontAwesome图标和A标记之间的空格来自哪里？

Question

直播页面：k2&view=item&layout=item&id=92&Itemid=305

每一个马赛克在图像下面有两条线，每行前面都有一个FA图标。第一行是链接，第二行是纯文本。我使用fa-fw使图标保持在相同的大小并对齐文本。但是在图标和A标签之间似乎有一个空白，这是从哪里来的，为了保持文本对齐，我必须在图标和第2行文本之间手动添加一个空格。为了演示的目的，我省略了第一个马赛克的这个空间，你可以看到文本没有对齐。我想我以前遇到过这个问题，如果没有FA，我记得它涉及到span之间的一些神秘空间，但是我不能重现这个场景。所以这可能与足总无关。

Answer 1

问题在于您在呈现内容时使用的缩进。浏览器认为它是一个单独的空间：

<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>

在向内容中添加许多空格时，也会发生相同的情况：

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