css 不變，僅改動(dòng) html 內(nèi)部文本節(jié)點(diǎn)，display:inline 出現(xiàn)了奇怪的空隙

外層設(shè)置font-size:0px;
或者把li寫(xiě)在一行，類(lèi)似

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

最外層div設(shè)置font-size:0px

空白字符壓縮（white space collapse）是西文排版的必然結(jié)果。SGML、TeX都是如此。不過(guò)對(duì)于不使用空格作為詞分界的語(yǔ)言，比如東亞語(yǔ)言來(lái)說(shuō)，就造成了問(wèn)題。解決辦法有：

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

補(bǔ)充其他情況

<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>

文本后面增加一個(gè)空格，沒(méi)有空隙

<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>

文本前面增加一個(gè)空格，空隙還在

看起來(lái)是 元素內(nèi)部的 空白/換行 合并了 元素外部的 空白/換行

行內(nèi)空白合并不受元素限制

<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>

知道原因后，可以這樣解決問(wèn)題

<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>