Html CSS：为什么左边框占用了额外的空间？

这是我的网站：当我应用左边框时，它会在右边的网站上创建一个空间。检查并删除左边框时，您会看到右侧的空白消失

---

请签出以下URL以获得白间距的解决方案

这是你的解决方案

在li处添加

浮动：左

#top-menu li {
display: inline-block;
float: left;
font-size: 14px;
padding-right: 22px;
}

请将相关代码添加到您的问题中 存在间隙的原因是

li

s设置为

display:inline block

。这意味着浏览器将它们视为单词，当它们之间有空格时，浏览器将渲染它们。在您的例子中，空格来自换行符和用于在html中缩进的空格

解决方案1（有点老套） 直接解决此问题的一个解决方案是添加：

#top-menu{
    ...
    font-size: 0;
}

这基本上使浏览器放置的空间没有字体大小，从而使其消失。不完美，但它直接解决了问题。正如@Kudla69在他的回答中指出的那样，这确实破坏了

字体大小

继承，这也会导致问题，这就是为什么这个特定的黑客不是推荐的途径

建议的解决方案2 另一种直接解决这个问题的方法是删除HTML中的空格。重新构造HTML以使其更像

<li> This is something
</li><li> This is something else
</li>

这是一件大事
这是另一回事

这将删除元素之间的空间，浏览器将基本上将它们视为没有空间的单词，并将它们直接相互碰撞

解决方案3 最后，如果您不介意，还可以

float:left

使用

li

元素。但在某些情况下，这可能会导致大小调整问题。这会将它们从流中删除，以便浏览器不再将它们视为文字

---

或者正如其他人所说，使用

display:flex

，它有时也会与

inline block

有点不同，但它是一种更现代的方法。

在对OP的评论中，@Marvin指出了问题的根本原因（并链接到主题）：这是因为inline block项之间存在空格字符。内联块元素属于内联格式上下文，就像文本中的单词一样，它们之间的任何空白字符都充当文本中的空白字符，即单词间距。这不是虫子。按照标准，

display:inline block

应该是这样工作的

设置边框并不会产生这种间距，它只是使其可见

有很多方法可以解决这个问题。仅提及其中一些：

• 负片

  左边距
  。缺点：你需要知道它的确切宽度
  一个空白字符，它取决于字体设置等

• 负数

  字间距

  或

  字母间距

  （或者两者都有，就像在旧的YUI解决方案中一样）。缺点：与上面相同+浏览器对待负间隔的方式不同，有些允许项目重叠，有些不允许
• 删除上一个项目的结束标记和下一个项目的开始标记之间的空格。缺点：需要对标记进行控制，但并不总是与模板引擎兼容，这会降低代码的可读性
• 用HTML注释（
  ）注释掉这些标记之间的空格。缺点：如上所述，这些注释需要冗余的DOM节点

• 字体大小：0。缺点：你不能再在
  em
  单位中设置项目的字体大小了，在旧的Android浏览器中工作时有缺陷

• 省略

结束标记。它在HTML5中有效（在HTML中始终有效，但在XHTML中无效），这样做会使浏览器在下一个
开始标记之前隐式关闭它们，在它们之间不留空格。缺点：只适用于有限的标记集，不容易阅读，可能会导致代码编辑器出现问题（例如语法突出显示错误）
• 使用空格字符宽度为零的容器的自定义字体。缺点：对该字体的额外HTTP请求（如果嵌入了额外字节），在旧的/代理浏览器（如Opera Mini）中不起作用
• 使用浮动代替内联块。缺点：有效地消除了内联块的所有效果（包括它们的优点，如水平和垂直对齐选项），需要“清除”容器
• 对容器使用

  display:table

  ，对项目而不是内联块使用

  display:table cell

  。缺点：不能换行到新行，项目不能有不同的高度，需要不同的样式方法（例如，

  边框间距

  ，而不是

  边距

  ，以便在需要时控制间距）

这个列表还不完整。这些方法都不是完美的，因为它们基本上都是黑客

然而，我深信解决任何问题的最佳方法是使用不会导致问题的适当工具。在这种情况下，有这样的工具：Flexbox。它具有与内联块（以及更多）相同的对齐功能，它不需要“ClearFixed”，如果需要，它可以换行到新行，并且它目前正在使用。默认情况下，它不会在项目之间留下任何空间

---

实际上，您可以将

display:flex

添加到容器中，在现代浏览器中，不需要的空间会自动消失。您现有的内联块解决方案仍然可以在非常旧的浏览器中工作，提供了适当的回退。

@Dons answer很好地解释了根本问题。这里有一个替代解决方案，将ul设为flexbox。在我看来，这种方法更好，因为您不必随意将字体大小设置为0，这将破坏任何字体大小继承

#top-menu.nav {
 display: flex;
}

---

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点，否则，这个问题将失去任何价值