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

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 元素內(nèi)部文本節(jié)點有換行時，如圖
圖片描述

<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 內(nèi)部最后增加了空白/換行，原來的外部空白/換行引起空隙消失了

回答

編輯回答

法克魷

外層設置font-size:0px;
或者把li寫在一行，類似

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

2018年6月5日 12:17

編輯回答

練命

最外層div設置font-size:0px

2017年7月20日 12:56

編輯回答

有點壞

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

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

2018年9月19日 12:44

編輯回答

護她命

補充其他情況

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

文本前面增加一個空格，空隙還在
圖片描述

圖片描述
看起來是元素內(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>

圖片描述

知道原因后，可以這樣解決問題

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

圖片描述

2018年7月9日 07:21