为何LI元素间存在间隙？已设margin:0仍未解决

嘿，这个坑我之前踩过好多次！你已经把全局margin和padding清零了，但inline-block元素之间的微小间隙不是margin的问题——根源是HTML代码里的换行、空格或者制表符！浏览器会把这些空白字符解析成一个空格，所以就出现了你看到的间隙。

下面给你几个实用的解决方案，挑适合你的来用：

方案1：消除HTML里的空白字符 #

最简单的办法就是把列表项的标签连在一起写，让它们之间没有空白：

<ul>
  <li><a href="#">导航项1</a></li><li><a href="#">导航项2</a></li><li><a href="#">导航项3</a></li>
</ul>

如果觉得这样代码可读性太差，也可以用注释来“吃掉”空白：

<ul>
  <li><a href="#">导航项1</a></li><!--
  --><li><a href="#">导航项2</a></li><!--
  --><li><a href="#">导航项3</a></li>
</ul>

方案2：父元素设font-size: 0，子元素恢复字号 #

这个方法不用改HTML，只需要调整CSS：

* { margin: 0; padding: 0; }
/* 给ul设置font-size:0，消除空白字符的影响 */
.nav > ul {
  font-size: 0;
}
.nav > ul > li, .nav > ul > li> a {
  display: inline-block;
  padding: 10px 15px;
  color: #ffffff;
  font-family: Roboto Slab;
  font-size: 14px; /* 这里要和你原来的字号一致，不然文字会消失 */
}

注意一定要给li和a恢复font-size，不然导航文字会看不见哦。

方案3：用Flexbox替代inline-block（最推荐） #

如果你的项目不需要兼容太老的浏览器，直接用Flex布局就完全没这个烦恼，而且布局更灵活：

* { margin: 0; padding: 0; }
.nav > ul {
  display: flex;
  list-style: none; /* 清除默认的列表圆点 */
}
.nav > ul > li> a {
  padding: 10px 15px;
  color: #ffffff;
  font-family: Roboto Slab;
  font-size: 14px;
}

Flex布局天然不会有空白字符的间隙问题，还能轻松实现垂直居中、自动分配空间等效果，现在已经是导航布局的首选方案了。

你可以先试试Flex方案，应该能立刻解决问题。如果还有间隙，再检查一下有没有其他CSS规则（比如letter-spacing、word-spacing）影响了元素间距~

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