[Transfer]N Möglichkeiten, den Abstand zwischen Inline-Block-Elementen zu entfernen

Aus Zhang Xinxu-Xin Space-Xin Life [http://www.zhangxinxu.com]

1. Phänomenbeschreibung

Im wahrsten Sinne des Wortes gibt es eine Lücke zwischen horizontal dargestellten Elementen, wenn sie in Zeilenumbrüchen oder durch Leerzeichen getrennt angezeigt werden:

<input> <input type="submit">

Der Abstand ist hier~~

Wir verwenden CSS, um horizontale Nicht-Inline-Block-Elemente in horizontale Inline-Block-Elemente zu ändern, und dieses Problem wird auch auftreten:

<span style="color: #000000;">.space a {
    display: inline</span>-<span style="color: #000000;">block;
    padding: .5em 1em;
    background</span>-<span style="color: #000000;">color: #cad5eb;
}
</span><div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

Sie können hier klicken: Demo zum Inline-Blockabstand zwischen Elementen

Diese Art von Leistung ist, wie sie in Übereinstimmung mit den Spezifikationen sein sollte (wenn jemand denkt, dass es sich um einen Fehler handelt, ist das ()ay ()oy).

Diese Art von Abstand wirkt sich jedoch manchmal auf unser Layout oder die Kompatibilitätsverarbeitung aus. Was sollten wir tun? N Methoden sind unten aufgeführt (willkommene Ergänzungen)!

2. Methode zum Entfernen von Leerzeichen

Der Grund für den Leerraum zwischen Elementen ist der Abstand zwischen Tag-Segmenten. Wenn Sie den Leerraum in HTML entfernen, entsteht daher kein natürlicher Abstand. Angesichts der Lesbarkeit des Codes ist es natürlich nicht ratsam, ihn in einer Zeile zu schreiben. Wir können:

<div class="space">
    <a href="##"><span style="color: #000000;">
    惆怅</span></a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

oder:

<div class="space">
    <a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>

Oder verwenden Sie HTML-Kommentare:

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

Warte.

3. Verwenden Sie negative Margenwerte

.space a {
    display: inline-block;
    margin-right: -3px;
}

Die Größe des negativen Randwerts hängt von der Schriftart und Textgröße des Kontexts ab. Den entsprechenden Größenwert des Abstands finden Sie in der Statistiktabelle in Teil 6 meines vorherigen Artikels „Listenlayout basierend auf der Anzeige: inline-block":

Bei einer Kontextgröße von 12 Pixel beträgt der margin negative Wert für die Schriftart Arial beispielsweise -3 Pixel, Tahoma und Verdana sind -4 Pixel und Geneva ist -6 Pixel.

Aufgrund der Unsicherheit der äußeren Umgebung und des zusätzlichen übergeordneten Randwerts des letzten Elements ist diese Methode nicht für den Einsatz in großem Maßstab geeignet.

4. Lassen Sie das geschlossene Etikett die Kapsel essen

Gehen Sie wie folgt vor:

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

Beachten Sie, dass das schließende (schließende) Tag des letzten Listentags nicht verloren gehen darf, um die Abwärtskompatibilität mit IE6/IE7 und anderen Browsern zu gewährleisten, die auf Mengniu entwickelt wurden.

In HTML5 haben wir direkt:

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

Okay, auch wenn es sich etwas seltsam anfühlt, ist es in Ordnung.

Sie können hier klicken: Kein schließendes Tag, um die Demo zum Entfernen von Inline-Block-Elementabständen zu entfernen

5. Verwenden Sie die Schriftgröße:0

Code ähnlich dem folgenden:

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

Diese Methode kann grundsätzlich den Abstand zwischen Inline-Block-Elementen in den meisten Browsern lösen (Browser wie IE7 haben manchmal einen Abstand von 1 Pixel). Es gibt jedoch einen Browser, Chrome, der standardmäßig eine Mindestschriftgröße hat. Aus Kompatibilitätsgründen müssen wir außerdem Folgendes hinzufügen:
ähnlich dem folgenden Code:

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

您可以狠狠地点击这里（去年制作的一个简单demo）：font-size:0清除换行符间隙demo

补充：根据小杜在评论中中的说法，目前Chrome浏览器已经取消了最小字体限制。因此，上面的-webkit-text-size-adjust:none;代码估计时日不多了。

六、使用letter-spacing

类似下面的代码：

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

根据我去年的测试，该方法可以搞定基本上所有浏览器，包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。

七、使用word-spacing

类似下面代码：

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

您可以狠狠地点击这里：word-spacing与元素间距去除demo

与上面demo一样的效果，这里就不截图展示了。如果您使用Chrome浏览器，可能看到的是间距依旧存在。确实是有该问题，原因我是不清楚，不过我知道，可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。

.space {
    display: inline-table;
    word-spacing: -6px;
}

八、其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

以下是一个名叫RayM的人提供的方法：

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}

也就是上面一系列CSS方法的组组合合。