为什么 li 与 li 元素之间有看不见的空白间隔？如何解决？

产生原因

<li> 元素的默认显示类型为块级元素（block-level），但当其父元素（如 <ul> 或 <ol>）的 CSS 样式为 display: inline-block 时，每个 <li> 元素会被当作内联块元素处理。这时，HTML 代码中 <li> 标签之间的空白字符会被渲染为实际的空白，这就是空白间隔的来源。

例如，下面的 HTML 代码会在 <li> 元素之间产生空白间隔：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

解决方法

1. 移除空白字符：

   直接在 HTML 代码中删除 <li> 标签之间的所有空白字符（包括换行、空格）：

   <ul>
     <li>Item 1</li><li>Item 2</li><li>Item 3</li>
   </ul>
   

   缺点是这种方法会使代码可读性降低。

2. 注释空白字符：

   在 <li> 标签之间使用 HTML 注释来移除空白字符：

   <ul>
     <li>Item 1</li><!--
     --><li>Item 2</li><!--
     --><li>Item 3</li>
   </ul>
   

   这种方法保留了代码的可读性，同时去除了空白。

3. 设置父元素的字体大小为 0：

   将父元素的字体大小设置为 0，消除空白字符造成的间隔：

   <ul style="font-size: 0;">
     <li style="font-size: 16px;">Item 1</li>
     <li style="font-size: 16px;">Item 2</li>
     <li style="font-size: 16px;">Item 3</li>
   </ul>
   

   缺点是需要单独为 <li> 元素设置字体大小。

4. 使用负边距：

   给 <li> 元素设置负的 margin-right 或 margin-left：

   <ul>
     <li style="margin-right: -4px;">Item 1</li>
     <li style="margin-right: -4px;">Item 2</li>
     <li style="margin-right: -4px;">Item 3</li>
   </ul>
   

   这个方法需要手动调整负边距的值，以适应不同的字体和布局。

5. 使用浮动或弹性盒模型：

   可以使用浮动（float）或 Flexbox 布局来完全避免这种问题。

   使用浮动：

   <ul style="overflow: hidden;">
     <li style="float: left;">Item 1</li>
     <li style="float: left;">Item 2</li>
     <li style="float: left;">Item 3</li>
   </ul>
   

   使用 Flexbox：

   <ul style="display: flex;">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
   

   使用 Flexbox 是一个现代化的解决方案，支持良好的响应式布局。

总结

这些方法各有优缺点，选择哪种方法取决于具体的项目需求和代码风格。使用 Flexbox 是推荐的现代解决方案，因为它可以轻松地管理布局和间距。