添加<!doctype html>后<i>与父<span>标签出现异常间距问题求助

• <!DOCTYPE html>会触发浏览器标准渲染模式，怪异模式下浏览器使用非标准的老旧渲染逻辑，行内/行内块元素的对齐规则和标准模式存在差异，这是你两个模式下表现不一致的根本原因。
• 多余间距来自两个维度：
  1. 垂直间距：Font Awesome的<i>标签默认是display: inline-block属性，行内块元素默认vertical-align值为baseline，会基于父元素的文本基线对齐，下方会预留出对应文本下行高度的空白区域，就是你看到的垂直方向多余间距。
  2. 水平间距：你的HTML代码中标签之间的换行、空格会被标准模式识别为空白字符，渲染出额外的水平间距。
     你之前设置vertical-align: middle未生效，大概率是没有覆盖到默认样式优先级，或者仅给单个元素设置没有解决全局对齐逻辑的问题。

1. 彻底消除垂直间距 #

给Font Awesome的图标统一设置对齐属性，优先级高于默认样式即可：

.fa, .fas {
  vertical-align: top;
  /* 也可以设置为bottom，都可以完全消除基线预留的空白 */
}

2. 消除水平空白间距 #

任选一种方案即可：

• 方案1：压缩HTML代码，删掉标签之间的所有换行和空格：

<div id="bar-sticky"><span id="sec-menu"><i class='fa fa-bars'></i></span><span id="sec-search"><i class='fa fa-search'></i></span></div>

• 方案2：给父容器设置font-size: 0消除空白字符渲染，再给子元素恢复字体大小：

#bar-sticky {
  font-size: 0;
}
#bar-sticky span, #bar-sticky .fa {
  font-size: 16px; /* 替换为你实际需要的字体大小 */
}

• 方案3：将span标签也设置为行内块元素，配合对齐属性：

#sec-menu, #sec-search {
  display: inline-block;
  vertical-align: top;
}

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