如何移除Font Awesome图标与外层div容器之间的多余空白间距

问题产生原因 #

• Font Awesome图标本质是特殊字体字符，你为图标设置了font-size: 10rem，而浏览器默认行高一般为1.2~1.5，字符实际占用的高度为font-size * 行高，远大于图标本身的视觉高度。
• 字体设计阶段为了满足全字符上下对齐基线的需求，单个字符的em框本身就预留了上下空白，这部分留白也会被算入元素的实际占用空间。
• 外层使用flex纵向布局时，没有对图标元素的边距、行高做特殊限制，多余的空白就直接显现出来。

解决方案 #

可按顺序尝试以下方案：

1. 优先调整图标行高为1，消除行高带来的额外高度：

.fa-quote-left {
  line-height: 1;
}

2. 如果调整行高后仍有剩余留白，属于字体本身的预留空白导致，可用负margin微调消除，数值可根据实际显示效果调整：

.fa-quote-left {
  line-height: 1;
  margin-top: -1.2rem;
  margin-bottom: -1.2rem;
}

3. 如需更精准的控制，可直接给图标设置固定高度配合对齐裁剪：

.fa-quote-left {
  height: 8rem; /* 数值匹配图标实际视觉高度即可 */
  overflow: hidden;
  display: flex;
  align-items: center;
}

内容的提问来源于stack exchange，提问作者Boky