[Transfer]N ways to remove the spacing between inline-block elements

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

1. Phenomenon description

In the true sense of inline-block, there will be a gap between elements presented horizontally when displayed in line breaks or separated by spaces. A very simple example:

<input> <input type="submit">

The distance is here~~

We use CSS to change non-inline-block horizontal elements to inline-block horizontal elements, and this problem will also occur:

<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>

You can click here: inline-block spacing between elements demo

This kind of performance is what it should be in compliance with the specifications (if someone thinks it is a bug, that's ()ay ()oy).

However, this kind of spacing sometimes affects our layout or compatibility processing. We need to remove it. What should we do? N methods are shown below (welcome additions)!

2. Method to remove spaces

The reason for the white space between elements is the space between tag segments. Therefore, if you remove the space in HTML, there will be no natural spacing. Considering the readability of the code, it is obviously not advisable to write it in one line. We can:

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

or:

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

Or with the help of HTML comments:

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

Wait.

3. Use negative margin values

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

The size of the negative margin value is related to the font and text size of the context. The corresponding size value of the spacing can be found in the statistical table in part 6 of my previous article "List layout based on display:inline-block":

For example, for a 12 pixel size context, the Arial font has a negative margin of -3pixels, Tahoma and Verdana are -4pixels, and Geneva is -6pixels.

Due to the uncertainty of the external environment and the extra parent margin value of the last element, this method is not suitable for large-scale use.

4. Let the closed label eat the capsule

Process as follows:

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

Note that in order to be backward compatible with IE6/IE7 and other browsers that grew up on Mengniu, the closing (closing) tag of the last list tag cannot be lost.

In HTML5 we directly:

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

Okay, although it feels a bit weird, it’s OK.

You can click here: No closing tag to remove inline-block element spacing demo

5. Use font-size:0

Code similar to the following:

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

This method can basically solve the spacing between inline-block elements in most browsers (browsers such as IE7 sometimes have a 1-pixel spacing). However, there is a browser, Chrome, which has a minimum font size limit by default. Because, considering compatibility, we also need to add:
Code similar to the following:

.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方法的组组合合。