css 不变，仅改动 html 内部文本节点，display:inline 出现了奇怪的空隙

Question

CSS 部分

.menu {}
.menu .row {margin:0;padding:0;list-style:none;}
.menu .item {position:relative;margin:0;padding:0 0.5em;cursor:default;color:#000;box-sizing:border-box;}
.menu .item:hover {color:#FFF;background-color:#666;}
.menu .row > .item {display:inline;border:1px solid #000;box-sizing:border-box;}

html 部分

<div class="menu">
    <ul class="row">
        <li class="item">
            File
        </li>
        <li class="item">
            Edit
        </li>
        <li class="item">
            View
        </li>
        <li class="item">
            Help
        </li>
    </ul>
</div>

li 元素内部文本节点有换行时，如图

<div class="menu">
    <ul class="row">
        <li class="item">File</li>
        <li class="item">Edit</li>
        <li class="item">View</li>
        <li class="item">Help</li>
    </ul>
</div>

li 元素 html不换行时，如图

这里用的是 display:inline，不是 display:inline-block 空隙问题

去除所有 空格/换行 可以解决问题

我想知道的是：为什么 li 内部最后增加了 空白/换行，原来的外部 空白/换行 引起空隙消失了

Answer 1

补充其他情况

<div class="menu">
    <ul class="row">
        <li class="item">File </li>
        <li class="item">Edit </li>
        <li class="item">View </li>
        <li class="item">Help </li>
    </ul>
</div>

文本后面增加一个空格，没有空隙

<div class="menu">
    <ul class="row">
        <li class="item"> File</li>
        <li class="item"> Edit</li>
        <li class="item"> View</li>
        <li class="item"> Help</li>
    </ul>
</div>

文本前面增加一个空格，空隙还在

---

看起来是 元素内部的 空白/换行 合并了 元素外部的 空白/换行

---

行内空白合并不受元素限制

<div style="border:1px solid red;">
    <span style="box-shadow:0 0 0 1px #000 inset;">A </span><span style="box-shadow:0 0 0 1px #000 inset;"> B</span>
</div>

---

知道原因后，可以这样解决问题

<style type="text/css">
.menu {}
.menu .row {margin:0;padding:0;list-style:none;}
.menu .item {position:relative;margin:0;padding:0 0.5em;cursor:default;color:#000;box-sizing:border-box;}
.menu .item:hover {color:#FFF;background-color:#666;}
.menu .row > .item {display:inline;border:1px solid #000;box-sizing:border-box;}
/* css 多加这一行 */
.menu .item:after {content:' ';display:inline;}
</style>
<div class="menu">
    <ul class="row">
        <li class="item">File</li>
        <li class="item">Edit</li>
        <li class="item">View</li>
        <li class="item">Help</li>
    </ul>
</div>

Answer 2

最外层div设置font-size:0px

Answer 3

外层设置font-size:0px;
或者把li写在一行，类似

<ul class="row">
        <li class="item"> File</li><li class="item"> Edit</li>....
</ul>

Answer 4

空白字符压缩（white space collapse）是西文排版的必然结果。SGML、TeX都是如此。不过对于不使用空格作为词分界的语言，比如东亚语言来说，就造成了问题。解决办法有：

      一.
        ul{ white-space-collapse:discard; }
        li{ display: inline-block;}
      二.
      父元素设font-size:0，子元素重新设大小;      
      三.
      删除 HTML 文件中 inline-block 元素之间的空格和空行。