浏览器将 "ghost" spacing/margin 添加到 inline-block （列表项）

Question

所以我注意到浏览器正在向不应包含 space 的内容中添加 space。

在chrome，检查员。有 "no" browser/user_agent 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 自动添加的所有 margins/paddings。这完全是鬼。现在，如果我要使用 float:left spaces 将不存在，但我希望代码是内联的，但仍然如此。没有我说 add space 的命令，为什么一开始会有任何东西？除非我另有说明，否则它应该紧靠在一起。

Answer 1

是<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;
 }

希望对您有所帮助！

Answer 2

Minimized HTML 也将解决这个问题，这是由代码具有 space、制表符或换行符引起的。下面也会为你解决这个问题

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

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

浏览器将 "ghost" spacing/margin 添加到 inline-block （列表项）

Browser adds "ghost" spacing/margin to inline-block (list items)

html

css

html-lists

HTML

CSS（未修改）