inline 或 inline-block 元素間的間隙

elva 發(fā)布于2019-08-30 15:54 / 581人閱讀

摘要：當(dāng)您將元素顯示值設(shè)置為內(nèi)聯(lián)或內(nèi)聯(lián)塊時，您通常會在元素之間看到默認(rèn)的空格。如果您不想要設(shè)計中的空格，可以通過多種方法將其刪除。

當(dāng)您將元素顯示值設(shè)置為內(nèi)聯(lián)或內(nèi)聯(lián)塊時，您通常會在元素之間看到默認(rèn)的空格。如果您不想要設(shè)計中的空格，可以通過多種方法將其刪除。

示例代碼：


    inline
    inline-block

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

解決方案 方法一：通過利用負(fù)邊距，達(dá)到刪除空隙

更改上述代碼：

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

這應(yīng)該常用一種方式；但是這種方式會受祖先容器字體大小影響，如果字體越大其間隙越大，也就不是上述提供 -5px，就能達(dá)到刪除空隙了；

可以通過JS輔助驗證，空隙是否跟字體大小有關(guān)：

// 字體大小設(shè)置為 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
// 所以我們前面設(shè)置 -5px 原因， 因為CSS不支持小數(shù)點，所以才向上取整；


// 字體大小設(shè)置為 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
// 那么我們前面設(shè)置 -5px ，就會失效了

了解 getBoundingClientRect 使用，大家可以點擊這里查看：

方法二：刪除元素之間前后間隙


    inline
inline-block

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

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