inline 或 inline-block 元素間的間隙

當您將元素顯示值設置爲內聯或內聯塊時，您一般會在元素之間看到默認的空格。若是您不想要設計中的空格，能夠經過多種方法將其刪除。

示例代碼：

<ul>
    <li id = "first">inline</li>
    <li id = "last">inline-block</li>
</ul>

body {
    margin:0;
}
ul {
    /*font-size: 40px;*/
    list-style:none;
    margin: 0;
    padding:0;
}
ul li {
    display: inline-block;
    border: 1px solid #ccc;  //  設置邊框方便查詢
}

解決方案

方法一：經過利用負邊距，達到刪除空隙

---

更改上述代碼：

ul li + li {
    margin-left: -5px;
}

這應該經常使用一種方式；可是這種方式會受祖先容器字體大小影響，若是字體越大其間隙越大，也就不是上述提供 -5px，就能達到刪除空隙了；

能夠經過JS輔助驗證，空隙是否跟字體大小有關：

// 字體大小設置爲 16px 狀況下：
var first = document.querySelector('#first');
var last = document.querySelector('#last');

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left - c1.width;
// gapWidth =>  4.732177734375
// 因此咱們前面設置 -5px 緣由， 由於CSS不支持小數點，因此才向上取整；


// 字體大小設置爲 32px 狀況下：
var first = document.querySelector('#first');
var last = document.querySelector('#last');

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left - c1.width;
// gapWidth =>  9.46435546875
// 那麼咱們前面設置 -5px ，就會失效了

瞭解 getBoundingClientRect 使用，你們能夠點擊這裏查看：

方法二：刪除元素之間先後間隙

---

<ul>
    <li class = "first">inline</li><li class = "last">inline-block</li>
</ul>

方法三：把父元素 font-size:0，其子元素再從新指定字體大小

---

ul {
    list-style:none;
    margin: 0;
    padding:0;
    font-size:0;
}
ul li {
    display: inline-block;
    border: 1px solid #ccc;  //  設置邊框方便查詢
    font-size: 16px;
}