浏览器将“幽灵”间距/边距添加到内联块（列表项）[重复]答案

【问题标题】：Browser adds "ghost" spacing/margin to inline-block (list items) [duplicate]浏览器将“幽灵”间距/边距添加到内联块（列表项）[重复]
【发布时间】：2015-03-16 16:53:42
【问题描述】：

所以我注意到浏览器正在向不应有空格的内容添加空格。

在 chrome 中，检查员。有“没有”浏览器/用户代理 css 正在这样做，它不存在，但这里有证据。

CSS：

 ul.S_GAMES li {
   margin: 0;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   width: 150px;
   height: 125px;
   background-image:url(/assets/preloadimg.GIF);
   background-repeat: no-repeat;
   background-position:center;

   /* this is just to show the design without adding extra space like borders */
   outline:#ccc 1px solid;
 }

HTML

   <ul class="S_GAMES">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>

我还使用了 CSS 重置代码，它会删除 HTML 自动添加的所有边距/填充。这完全是鬼。现在，如果我要使用 float:left 空格将不存在，但我希望代码是内联的，但仍然。没有我的命令说添加空间，为什么首先会有任何空间？除非我另有说明，否则它应该彼此紧贴。

【问题讨论】：

任何答案是否有助于解决您的问题？如果是，请将该答案标记为已接受，如果不是，请进一步说明您的问题。

标签： html css html-lists

【解决方案1】：

最小化的 HTML 也可以解决这个问题，它是由包含空格、制表符或换行符的代码引起的。以下也将为您解决这个问题

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

【讨论】：

【解决方案2】：

这是<li> 之间的空格。您可以通过在每个元素之间添加注释来解决它。 JSFiddle

HTML

<ul class="S_GAMES">
    <li></li><!--
 --><li></li><!--
 --><li></li><!--
 --><li></li>
</ul>

CSS（未修改）

 ul.S_GAMES li {
   margin: 0;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   width: 150px;
   height: 125px;
   background-image:url(/assets/preloadimg.GIF);
   background-repeat: no-repeat;
   background-position:center;

   /* this is just to show the design without adding extra space like borders */
   outline:#ccc 1px solid;
 }

希望对你有帮助！

【讨论】：