Question

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

每个马赛克在图像下面都有两行，每行在其前面都有一个FA图标。第一行是链接，第二行是纯文本。我使用fa-fw来保持图标大小相同并对齐文本。但是图标和来自无处的A标签之间似乎有一个空白区域，为了保持文本对齐，我必须在图标和第二行文本之间手动添加空格。出于演示目的，我省略了第一个马赛克的空间，你可以看到文本没有对齐。我想我之前遇到过这个问题，而且没有FA，我可以回想起它涉及span之间的一些神秘空间，但我无法重现这个场景。所以这可能与FA无关。

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>

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

1 个答案: