inline 或 inline-block 元素間的間隙

LdhAndroid 發布于2019-08-02 16:07 / 1952人閱讀

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

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

示例代碼：


    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;  //  設置邊框方便查詢
}

解決方案 方法一：通過利用負邊距，達到刪除空隙

更改上述代碼：

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 使用，大家可以點擊這里查看：

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


    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;  //  設置邊框方便查詢
    font-size: 16px;
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54692.html

inline 或 inline-block 元素間的間隙

摘要：當您將元素顯示值設置為內聯或內聯塊時，您通常會在元素之間看到默認的空格。如果您不想要設計中的空格，可以通過多種方法將其刪除。當您將元素顯示值設置為內聯或內聯塊時，您通常會在元素之間看到默認的空格。如果您不想要設計中的空格，可以通過多種方法將其刪除。示例代碼： inline inline-block body { margin:0; } ul { ...

elva 2019-08-30 15:54 評論0 收藏0
深入理解-CSS內聯元素之line-height

摘要：常見問題這一部分我們來說一說常見的內聯元素的一些問題。通過設置為，或者使用屬性，都可以達到去除內聯元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個與文字關系密切的屬性line-height。這里涉及到了內...

wapeyang 2019-08-29 15:06 評論0 收藏0
深入理解-CSS內聯元素之line-height

摘要：常見問題這一部分我們來說一說常見的內聯元素的一些問題。通過設置為，或者使用屬性，都可以達到去除內聯元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個與文字關系密切的屬性line-height。這里涉及到了內...

鄒強 2019-08-02 10:15 評論0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格來分隔單詞的，而漢字間則無需空格分隔，但為了統一西文東亞和的排版，于是抽象出一個名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語言信息。前言每當來個需要既要水平排版又要設置固定高寬時，我就會想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發...

cucumber 2019-08-30 12:56 評論0 收藏0