如何去除HTML中超链接菜单边缘的间隙？

你遇到的间隙主要来自浏览器默认样式和布局方式的问题，这里给你两种实用解决方案，推荐用flex布局的方式更简单可靠：

方案一：用Flex布局重构导航（推荐） #

这种方式能彻底解决所有间隙问题，还让导航布局更灵活可控：

修改后的完整代码：

<style>
/* 重置页面默认的body外边距，消除页面边缘和nav的间隙 */
body {
  margin: 0;
}
nav {
  display: flex;
  background-color: #cddc39;
  color: #333333;
  margin: 0;
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0; /* 消除ul默认的上下外边距 */
  display: flex;
  width: 100%;
  justify-content: space-around; /* 让导航项均匀分布 */
}
/* 优化链接样式，提升点击体验 */
nav ul li a {
  color: #333;
  text-decoration: none; /* 可选：去掉下划线 */
  padding: 12px 0; /* 可选：增大点击区域 */
  display: block;
}
</style>

<nav>
    <ul>
        <li><a href="Anpost.html">An Post</a></li>
        <li><a href="Ryanair.html">Ryanair</a></li>
        <li><a href="Services.html">Services</a></li>
        <li><a href="Contact.html">Contact</a></li>
    </ul>
</nav>

关键修改说明： #

• 给body加margin:0：消除浏览器默认的页面外边距，解决导航和页面边缘的间隙；
• 给nav ul加margin:0：去掉ul自带的上下外边距，避免ul和nav容器之间出现空隙；
• 把ul改成flex布局：替代原来的inline-block，自动消除导航项之间的空白间隙，布局逻辑更清晰；
• 移除li的inline-block样式：flex子元素默认会横向排列，不需要额外设置。

方案二：保留inline-block的修复方式 #

如果不想调整整体布局，仅修复间隙问题：

<style>
body {
  margin: 0; /* 同样要重置body默认外边距 */
}
nav {
  display: flex;
  justify-content: space-around;
  background-color: #cddc39;
  color: #333333;
  margin: 0;
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0; /* 消除ul默认外边距 */
  font-size: 0; /* 消除inline-block元素之间的空白间隙 */
}
nav ul li {
  display: inline-block;
  font-size: 16px; /* 恢复正常字体大小 */
}
</style>

<nav>
    <ul>
        <li><a href="Anpost.html">An Post</a></li>
        <li><a href="Ryanair.html">Ryanair</a></li>
        <li><a href="Services.html">Services</a></li>
        <li><a href="Contact.html">Contact</a></li>
    </ul>
</nav>

原理说明： #

inline-block元素之间的空白是因为HTML代码里的换行/空格被浏览器解析成了空白字符，给父元素ul设置font-size:0就能消除这个空白，再给li单独设置字体大小恢复正常显示。

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