如何去除<li>元素内容间的间隙？尝试margin等方法无效

• 清除列表默认内外边距
  浏览器默认会给<ul>/<ol>设置padding-left，<li>也可能带有默认的内外边距，先重置这些样式：

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; /* 不需要列表标记可添加 */
}
li {
  margin: 0;
  padding: 0;
}

• 消除内联元素换行产生的间隙
  如果<li>内部包含内联或内联块元素（比如<img>、display: inline-block的元素），HTML代码里的换行、缩进会被解析成空格，导致间隙。可以用以下方法解决：

1. 将内部内联元素的HTML代码写在同一行
2. 给<li>设置font-size: 0，再给内部元素单独恢复字体大小：

li {
  font-size: 0;
}
li > * {
  font-size: 16px; /* 根据需求设置实际字体大小 */
}

3. 给内联块元素设置margin-right: -4px（适配默认字体的空格宽度）

• 调整行高与垂直对齐
  若间隙来自行高设置，给<li>设置line-height: 1或匹配内容的行高，同时调整内部元素的垂直对齐方式：

li {
  line-height: 1;
}
li img, li .inline-block-item {
  vertical-align: top; /* 可选middle/bottom，按需调整 */
}

• 排查伪元素与继承样式
  部分CSS框架或全局样式会给<li>添加伪元素（::before/::after），或继承了父容器的额外边距。用浏览器开发者工具（F12）查看<li>的盒模型，确认是否有未知样式影响。

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