Html <；李>；及<；ul>；元素

我正在创建一个菜单，这时我注意到

和

之间的这个差距。即使将边距和填充设置为0也不能解决这个问题，我不知道它是从哪里来的

我在下面的例子中隔离了这个问题

代码呈现：

代码：

分区#集装箱{
显示：内联块；
边框：5px实心#00ff00；
} 
保险商实验室{
列表样式：无；
边际：0px；
填充：0px；
边框：5px实心#0000ff；
}
李{
显示：内联块；
边框：5px实心#ff0000；
宽度：30px；
高度：30px；
边际：0px；
填充：0px；
}

---

有趣的是，如果我在

元素中写入任何内容，那么间隙就会消失。有人能给我解释一下发生了什么以及我如何消除这个差距吗？

您需要添加一个

来解决您的问题

例如，

<div id="container">
   <ul >
      <li>&nbsp;</li>
      <li>&nbsp;</li>
   </ul>
</div>

---

希望这有帮助。

nathan建议的是一个解决方案，这里是另一个，不使用

内联块

显示格式，因为它有时会在没有内容的

中产生问题（如您的情况）…此演示使用的是

浮动

，没有内容

CSS

  li{
      display: block;
      border: 5px solid #CCC;
      width: 30px;
      height: 30px;
      margin: 0px;
      padding: 0px;
      float:left; //added this
     }
.clearfix   {clear:both;}

HTML

<div id="container">
   <ul ><li></li><li></li>
    <div class="clearfix"   ></div>
   </ul>
</div>

我想在前面回答的问题上再添加一个与已经回答的问题完全不同的问题

如果要使用

内联块

显示，则需要使用

垂直对齐

属性

例如，

<div id="container">
   <ul >
      <li>&nbsp;</li>
      <li>&nbsp;</li>
   </ul>
</div>

CSS更改：

 div#container{
         display: inline-block;
         border: 5px solid #00ff00;
         vertical-align:top;
      } 


      li{
         display: inline-block;
         border: 5px solid #ff0000;
         width: 30px;
         height: 30px;
         margin: 0px;
         padding: 0px;
         vertical-align:top;
      }

希望这有帮助。

这不是一个“错误”（我不认为）。这只是在一行上设置元素的方式。 您希望键入的单词之间的空格是空格，对吗？空间 这些块之间就像单词之间的空格。这并不是说 规范无法更新为内联块元素之间的空格应为 没什么，但我相当肯定这是一个巨大的蠕虫罐头，不太可能永远 发生

我使用负边距，它对我有效：

li {
    display: inline-block;
    margin-right: -4px;
}

---

你能解释一下为什么会这样吗？当我在

中没有内容时，这种差距从何而来？

必须声明“您在其中没有内容”，以确保浏览器没有内容。-@kikou假设我们得到了

工作答案

，kikou没有回应……他没有心情参与，他只会复制正确答案供自己使用，就是这样！）@Mayank-公平地说，kikou确实要求解释发生了什么，即内联块如何与其包含线框的基线交互，而不仅仅是如何删除空间。这里没有一个答案能提供这样的解释。@Alohci:WADR先生……解释也是如此，不仅仅是答案，我理解这一点，但是OP完全消失了，没有任何回应，我的评论代替了它！！！OP询问的是

下的空格，而不是它们之间的空格。在标记中它们之间没有空格，因此在本例中这不是问题。