去除行内(inline/inline-block)元素之间的间距

先展示一下，行内元素之间存在间距，实例代码如下：

<style>
div {
color: #fff;
padding: 25px 50px;
}

.inline-f00 {
display: inline;
background: #f00;
}

.inline-0f0 {
display: inline;
background: #0f0;
}

.inline-block-00f {
display: inline-block;
background: #00f;
}

.inline-block-000 {
display: inline-block;
background: #000;
}
</style>

<div class="inline-f00">inline</div>
<div class="inline-0f0">inline</div>

<div class="inline-block-00f">inline-block</div>
<div class="inline-block-000">inline-block</div>

运行代码的效果：



为什么会出现间距呢？？真正意义上的水平呈现的行内元素间，换行显示或空格分隔的情况下会有间距。

既然知道了出现间距的原因，接下来讨论去除行内元素之间的间距，推荐几种通用的方法。

去除空格或者换行

去除行内元素之间的空格和换行，可以把代码写成这个样子，虽然丑了点，但是得到了想要的效果，

<style>
div {
color: #fff;
padding: 25px 50px;
}

.inline-f00 {
display: inline;
background: #f00;
}

.inline-0f0 {
display: inline;
background: #0f0;
}

.inline-block-00f {
display: inline-block;
background: #00f;
}

.inline-block-000 {
display: inline-block;
background: #000;
}
</style>

<div class="inline-f00">inline</div><div class="inline-0f0">inline</div><div class="inline-block-00f">inline-block</div><div class="inline-block-000">inline-block</div>

也可以使用注释去掉空格和换行：

<!-- 下面的注释是重点 -->
<div class="inline-f00">inline</div><!--
--><div class="inline-0f0">inline</div><!--
--><div class="inline-block-00f">inline-block</div><!--
--><div class="inline-block-000">inline-block</div>

还可以：

<div class="inline-f00">inline</div
><div class="inline-0f0">inline</div
><div class="inline-block-00f">inline-block</div
><div class="inline-block-000">inline-block</div>

font-size: 0

设置父元素的font-size:0，子元素设置字体大小为正常字体大小。

<style>
div {
color: #fff;
padding: 25px 50px;
}

.inline-f00 {
display: inline;
background: #f00;
}

.inline-0f0 {
display: inline;
background: #0f0;
}

.inline-block-00f {
display: inline-block;
background: #00f;
}

.inline-block-000 {
display: inline-block;
background: #000;
}

.font-size-0 {
font-size: 0;
}

.font-size-0 div {
font-size: 16px;
}
</style>

<div class="font-size-0">
<div class="inline-f00">inline</div>
<div class="inline-0f0">inline</div>

<div class="inline-block-00f">inline-block</div>
<div class="inline-block-000">inline-block</div>
</div>

float:left/right

行内元素设置为浮动元素，行内元素之间的间距会消失。

<style>
div {
color: #fff;
float: left;
padding: 25px 50px;
}

.inline-f00 {
display: inline;
background: #f00;
}

.inline-0f0 {
display: inline;
background: #0f0;
}

.inline-block-00f {
display: inline-block;
background: #00f;
}

.inline-block-000 {
display: inline-block;
background: #000;
}
</style>

<div class="inline-f00">inline</div>
<div class="inline-0f0">inline</div>

<div class="inline-block-00f">inline-block</div>
<div class="inline-block-000">inline-block</div>

上面三种去除间距方法的效果：

特殊情况

一种特别的情况，相邻inline元素至少一个不包含内容的时候，不存在间距

<div style="display: inline; background: #f00; padding: 25px 50px;"></div>
<div style="display: inline; background: #000; padding: 25px 50px;"></div>

效果：