Bootstrap Icons图标非正方形 i元素底部多余空白如何修复

问题原因 #

这个多余空白是i标签默认的行内元素特性、默认行高和图标字体的下行预留空间共同导致的：

• i元素默认是display: inline类型，尺寸会受文本行高影响
• 浏览器默认行高通常为字体大小的1.2倍，24px字体对应的默认行高就有28.8px，多出的高度就会表现为底部空白
• 字体本身为p、y这类下伸字符预留的底部空间，也会额外增加元素高度

修复方案 #

给i元素添加display: inline-block和line-height: 1规则即可，修改后的CSS如下：

body {
    display: flex;
    justify-content: center;
}

i {
    font-size: 24px;
    border: 1px solid red;
    /* 新增以下两行 */
    display: inline-block;
    line-height: 1;
}

如果需要保留i元素的行内特性，也可以仅添加vertical-align: bottom规则，同样能消除底部多余空白。

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