CSS技术求助：如何移除HTML<li>标签之间的空白间隔

嘿，刚接触前端两个月就碰到这个经典小坑啦！别担心，这是很多新手都会遇到的问题，我来给你拆解一下原因和解决办法～

首先，li之间出现空白的常见原因是：HTML代码里<li>标签之间的换行、空格会被浏览器当成空格字符渲染出来，另外ul和li默认自带的margin、padding也可能造成视觉上的间隔，咱们一步步来解决：

方法1：用Flex布局（最推荐，现代布局首选） #

给ul设置flex布局，浏览器会自动忽略标签之间的空白，还能顺便去掉ul默认的内边距和外边距，一举两得：

ul {
  width: 100%;
  display: flex;
  flex-direction: column; /* 保持li垂直排列，和默认效果一致 */
  padding: 0; /* 移除ul默认的左侧内边距 */
  margin: 0; /* 移除ul默认的上下外边距 */
}
ul li {
  list-style-type: none;
  width: 100%;
}

方法2：消除空白字符的显示 #

既然空白是字符导致的，咱们可以让ul的字体大小设为0，再给li恢复正常字体大小：

ul {
  width: 100%;
  font-size: 0; /* 让空白字符消失 */
}
ul li {
  list-style-type: none;
  width: 100%;
  font-size: 16px; /* 根据你的设计需求调整字体大小 */
}

这种方法兼容性很好，适合老项目场景。

方法3：压缩HTML代码（不推荐，维护麻烦） #

把<li>标签之间的换行和空格删掉，让它们紧挨着写：

<ul>
<li><img src='http://via.placeholder.com/356x150' /><div class='shop-now'>...你的内容...</div></li>
<li>...下一个li的内容...</li>
</ul>

这种写法虽然能解决问题，但代码可读性差，后期维护起来很麻烦，所以不太推荐。

你可以根据自己的项目情况选一种方法试试，Flex布局是现在最常用也最灵活的方案，优先推荐哦！

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