如何消除Blogger网站菜单栏列表项之间的间隙？

Blogger平台会对HTML代码做额外解析，还会加载默认全局样式，这就是为什么本地正常的菜单栏到了Blogger里会出现列表项间隙。试试下面几种方法解决：

方法1：消除HTML换行产生的空白间隙 #

如果你的列表项是inline或inline-block布局，HTML里的换行会被解析成空白符，导致间隙。可以把列表项代码写在同一行：

<ul class="menu"><li>首页</li><li>文章</li><li>关于</li></ul>

或者用注释填充换行位置，避免空白符：

<ul class="menu">
  <li>首页</li><!--
  --><li>文章</li><!--
  --><li>关于</li>
</ul>

方法2：用CSS强制清除间隙 #

给菜单栏的父元素设置font-size: 0，再给列表项恢复正常字体大小，这样空白符会被压缩：

.menu {
  font-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu li {
  font-size: 16px; /* 替换成你需要的字体大小 */
  display: inline-block;
}

也可以用字符间距属性消除空白：

.menu {
  letter-spacing: -4px;
  word-spacing: -4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu li {
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
}

方法3：重置Blogger默认样式 #

Blogger会给ul、li添加默认的margin和padding，直接覆盖这些样式：

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu li {
  margin: 0;
  padding: 0;
}

如果还是没解决，用浏览器F12开发者工具查看列表项的盒模型，确认间隙是来自margin、padding还是空白符，再针对性调整样式。

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