簡(jiǎn)介

在CSS布局中，如果我們想要將一些元素在同一行顯示，其中的一種方法就是把要同行顯示的元素設(shè)置display屬性為inline-block。但是你會(huì)發(fā)現(xiàn)這些同行顯示的inline-block元素之間經(jīng)常會(huì)出現(xiàn)一定的空隙，這就是“換行符/空格間隙問(wèn)題”

  .wrap {
            display: inline-block;
            width: 100px;
            height: 100px;
        }

        .wrap1 {
            background-color: indianred;
        }
        .wrap2 {
            background-color: lawngreen;
        }
 <div class="wrap wrap1"></div>
    <div class="wrap wrap2"></div>

元素之間空隙.png

空隙產(chǎn)生的原因

元素被當(dāng)成行內(nèi)元素排版的時(shí)候，元素之間的空白符（空格、回車(chē)換行等）都會(huì)被瀏覽器處理，根據(jù)white-space的處理方式（默認(rèn)是normal，合并多余空白），原來(lái)HTML代碼中的回車(chē)換行被轉(zhuǎn)成一個(gè)空白符，在字體不為0的情況下，空白符占據(jù)一定寬度，所以inline-block的元素之間就出現(xiàn)了空隙。

解決方法

1.將前一個(gè)標(biāo)簽結(jié)束符和后一個(gè)標(biāo)簽開(kāi)始符寫(xiě)在同一行

缺點(diǎn)：代碼的可讀性變差。不提倡

2.# 為父元素中設(shè)置font-size: 0，在子元素上重置正確的font-size

缺點(diǎn)：inline-block元素必須設(shè)定字體，不然行內(nèi)元素中的字體不會(huì)顯示。 增加了代碼量，不提倡。

3.為inline-block元素添加樣式float:left

缺點(diǎn)：float布局會(huì)有高度塌陷問(wèn)題，不提倡。

4.設(shè)置子元素margin值為負(fù)數(shù)

缺點(diǎn)：元素之間間距的大小與上下文字體大小相關(guān)，因此這個(gè)方法不通用。

5.設(shè)置父元素，display:table和word-spacing(最佳解決方案)

為父元素設(shè)置

display: table;
word-spacing:-1em;

元素之間空隙1.png