为何i与li元素之间有看不见的空白间隔?如何解决？请说明原因与场景？

【概念释义】

i 与 li 元素之间的空白间隔，本质上是 HTML 中行内元素（inline）或行内块元素（inline-block）之间的空白字符（空格、换行符、Tab 等）被渲染为可见空白 所导致的现象。当 <i> 或 <li> 被设置为 display: inline 或 display: inline-block 时，元素之间的换行符或空格会被浏览器解析为一个字符宽度的空白，从而在视觉上产生间隔。

通俗解释：就像在 Word 中连续输入文字时，两个单词之间的空格会被显示出来一样，HTML 中多个行内元素之间的换行符也会被当作一个空格处理，导致元素之间出现预期外的间隙。

【基础使用】