先展示一下，行内元素之间存在间距，实例代码如下：
<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>
效果：