标签：
先展示一下，行内元素之间存在间距，实例代码如下：
<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，子元素设置字体大小为正常字体大小。
<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>
行内元素设置为浮动元素，行内元素之间的间距会消失。
<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>
效果：
去除行内(inline/inline-block)元素之间的间距
标签：
原文地址：http://www.cnblogs.com/yangzhinian/p/4900087.html
