两者之间的空白 and first 尽管采用内联阻止模式，它还是被吞没了

Question

下面的JsFiddle改编自post，我读了解HTML中的空白行为：

http://jsfiddle.net/ng5yuqjf/4/

根据上面提到的那篇，HTML文档中的空格反映在inline-block元素之间。

然而，在上面的小提琴中，a字符和第一个<li>之间没有空格，尽管HTML文件中两个元素之间存在空白，尽管一切都被设置为inline-block。

不知何故，似乎<ul>和第一个<li>之间的空白不计算在内。

我想知道这是否反映在某个特定的某个规范中，或者它是否提供了一个简短的理论解释。

谢谢！

PS：作为参考，上面提到的完整的HTML + CSS：

<tspan>
a</tspan><ul class="people-list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

//

* {
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
.people-list {
    list-style-type: none;
}
.people-list li {
    width: 2em;
    height: 2em;
    background: #f06;
    border: 1px solid;
}

Answer 1

<ul>和第一个<li>之间的空白在DOM中，所以如果你想要它出现，只需制作ul display:inline而不是display:inline-block。

像这样：

* {
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
.people-list {
    list-style-type: none;
    display:inline; /* Add this line */
}
.people-list li {
    width: 2em;
    height: 2em;
    background: #f06;
    border: 1px solid;
}
style, script, title {
    display:none;
}

<tspan>
a</tspan><ul class="people-list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

这背后的理论原因是display:inline-block为其内容创建了自己的一套线框，对于ul元素，它包括第一个li元素之前的空白区域。因为该空间现在位于一行的开头，所以根据white-space:normal - 16.6.1 The 'white-space' processing model, "as each line is laid out", step 1的规则将其丢弃以进行渲染。

然而，当ul是display:inline时，它不会创建自己的行框，因此空间不在行的开头，并且在渲染时不会被丢弃。