Question

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

根据上述内容，HTML文档中的空白反映在inline-block个元素之间。

但是，在上面的小提琴中，尽管HTML文件中两个元素之间存在空格，并且a字符和第一个<li>之间没有空格到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时，它不会创建自己的线框，因此该空间不在行的开头，并且在渲染时不会被丢弃。

尽管有内联块模式，但<ul>和第一个<li>之间的空白还是被吞噬了

1 个答案: