CSS中如何减小inline-block类型无序列表的列表项间距

你遇到的间距本质是inline-block元素默认会识别HTML代码中换行、缩进产生的空白字符，和你设置的margin无关，所以调整margin不会生效，以下是可落地的修改方案： #

方案1：父元素设置font-size为0（兼容性好） #

给父级ul添加font-size: 0清除空白字符影响，再给li单独设置需要的字体大小即可，还可以通过li的margin精确控制你需要的极小间距：

ul.mainNav {
  float: right;
  padding-right: 185px;
  font-size: 0; /* 新增 清除空白字符间距 */
}
li.mainNavItem {
  color: blueviolet;
  text-align: center;
  list-style: none;
  display: inline-block;
  background-color: #000000;
  width: 130px;
  line-height: 50px;
  font-size: 16px; /* 新增 设置回需要的字体大小 */
  margin-right: 2px; /* 这里调整你需要的极小间距，可额外添加li.mainNavItem:last-child{margin-right:0}去掉最后一项的多余间距 */
}

方案2：改用Flex布局（更灵活易维护） #

直接把ul改成flex布局，天然不会识别空白字符间距，用gap属性可以直接精确控制项之间的间距，不需要额外处理边距：

ul.mainNav {
  float: right;
  padding-right: 185px;
  display: flex; /* 新增 启用flex布局 */
  gap: 2px; /* 新增 直接调整这个数值控制你要的间距大小 */
}
li.mainNavItem {
  color: blueviolet;
  text-align: center;
  list-style: none;
  background-color: #000000;
  width: 130px;
  line-height: 50px;
}

方案3：修改HTML结构（不推荐，影响代码可读性） #

把li标签之间的换行、空格全部删掉，写成连续结构即可消除默认间距，后续需要间距还是通过li的margin调整：

<ul class="mainNav">
  <li class="mainNavItem">hi</li><li class="mainNavItem">hello</li><li class="mainNavItem">welcome</li><li class="mainNavItem">hallo</li>
</ul>

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