为什么这个无序列表中的元素之间存在差距？

Question

出于某种原因，this example中的<li>元素之间存在水平间隙，我根本无法理解为什么它们在那里。

标记

<ul>
    <li>
        Stuff
    </li>
    <li>
        Things
    </li>
    <li>
        /dev/null
    </li>
    <li>
        Use Jquery!
    </li>
</ul>

CSS

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:inline-block;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
    line-height:50px;
}

造成这些差距的原因是什么？

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:inline-block;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
    line-height:50px;
}

<ul>
    <li>
        Stuff
    </li>
    <li>
        Things
    </li>
    <li>
        /dev/null
    </li>
    <li>
        Use Jquery!
    </li>
</ul>

Answer 1

添加

float:left;

到ul > li以消除差距。

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:inline-block;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
  line-height:50px;
  float:left;
}

<ul>
    <li>
        Stuff
    </li>
    <li>
        Things
    </li>
    <li>
        /dev/null
    </li>
    <li>
        Use Jquery!
    </li>
</ul>

Answer 2

这些是由HTML源代码中的换行符生成的空格。

像这样删除它们：

<ul>
    <li>
        Stuff
    </li><li>
        Things
    </li><li>
        /dev/null
    </li><li>
        Use Jquery!
    </li>
</ul>

或在他们之间加上评论：

<ul>
    <li>
        Stuff
    </li><!--
    --><li>
        Things
    </li><!--
    --><li>
        /dev/null
    </li><!--
    --><li>
        Use Jquery!
    </li>
</ul>

Answer 3

我更喜欢这样做： https://jsfiddle.net/8acpf2jt/1/

ul {
  margin:0;
  padding:0;
  height:50px;
}
ul > li {
  display:block;
    position: relative;
    float: left;
  background-color:silver;
  height:100%;
  width:20%;
  max-width:300px;
  list-style-type:none;
  text-align:center;
    line-height: 3em;
    margin: 0;
    padding: 0;
}

所以，我认为填充是交易和显示类型。