使用 css 删除 ul 上的空白

Question

我试图删除固定顶部菜单左侧的一些空白 ul 但我被卡住了，我已经搜索并放置了这个：

 #nav li {
    list-style: none;
    display: inline-block;
}

我想将所有列表放在左侧（如 left: 0 ？），但是第一个列表项的左侧产生了一些空白。

为什么会发生这种情况，我该如何删除它？

这是代码（ 小提琴）：

 #contenedormenu {
  background-color: #FFFFFF;
  width: 100%;
  position: fixed;
  top: 0px;
  box-shadow: 0px 1px 2px #888;
  height: 40px;
  z-index: 1;
}
#menu {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0px;
}
#nav {
  width: 100%;
  height: 40px;
  top: 0px;
  position: fixed;
  margin-top: 0px;
}
#nav li {
  margin-top: 10px;
  list-style: none;
  display: inline-block;
}
#nav li a {
  color: #5D5D5D;
  font-family: Lobster, Arial, sans-serif;
  font-size: 16px;
  padding: 10px 5px 12px 5px;
  text-decoration: none;
  text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0;
}
#nav a:hover {
  background-color: #f15a24;
  color: white;
  text-shadow: none;
}

 <div id="contenedormenu">
  <div id="menu">
    <ul id="nav">
      <li id="inicio">
        <a href="#home" title="Home">Home</a>
      </li>
      <li id="item1">
        <a href="#home">Menu item 2</a>
      </li>
      <li id="item2">
        <a href="#home">Menu Item 3</a>
      </li>
    </ul>
  </div>
</div>

原文由 Aeross 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

演示

当你编码 padding: 0; 到 #nav

原文由 underscore 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 <ul> 标签集：

 font-size: 0px;

使用 <li> 标签集：

 font-size: 14px; /*or custom*/

其他解决方案： https ://davidwalsh.name/remove-whitespace-inline-block

原文由 Huy Nguyễn 发布，翻译遵循 CC BY-SA 3.0 许可协议