display:inline-block空格的解决办法

如图当我们使用display:inline-block时元素之间会有空格。

首先，先了解下display:inline-block的兼容性问题：

下面我整理了几种解决的办法，已经在Chrome，Firefox，IE上测试：

1.标签之间无空隙

<div class="div" style="background:#3f7ccf;">1</div><div class="div" style="background:#dcd9c0;">2</div><div class="div" style="background:#ffed53;">3</div>

2.标签使用同一个关闭标签(标签名相同)

<style>
  div{padding:0;margin:0;border:0;}
  .box{height:100px;border:1px solid red;  }
  .div{width:100px;height:100px;display:inline-block;}
  .div{*display:inline;zoom:1;}
</style>
<div class="box">
  <a class="div" style="background:#3f7ccf;">1
  <a class="div" style="background:#dcd9c0;">2
  <a class="div" style="background:#ffed53;">3</a>
</div>

注意：经测试，使用div标签不能实现。

3.注释将元素之间的间隔去掉

<div class="box">
  <div class="div" style="background:#3f7ccf;">1</div><!--
  --><div class="div" style="background:#dcd9c0;">2</div><!--
  --><div class="div" style="background:#ffed53;">3</div>
</div>

4.父元素设置font-size:0;

<style>
  div{padding:0;margin:0;border:0;}
  .box{height:100px;border:1px solid red;font-size:0;}
  .div{width:100px;height:100px;display:inline-block;}
  .div{*display:inline;zoom:1;}
</style>
<div class="box">
  <div class="div" style="background:#3f7ccf;">1</div>
  <div class="div" style="background:#dcd9c0;">2</div>
  <div class="div" style="background:#ffed53;">3</div>
</div>

5.父元素设置letter-spacing:0;

<style>
  div{padding:0;margin:0;border:0;}
  .box{height:100px;border:1px solid red;letter-spacing:-10px;}
  .div{width:100px;height:100px;display:inline-block;}
  .div{*display:inline;zoom:1;}
</style>
<div class="box">
  <div class="div" style="background:#3f7ccf;">1</div>
  <div class="div" style="background:#dcd9c0;">2</div>
  <div class="div" style="background:#ffed53;">3</div>
</div>

当.div元素标签改成行内元素或行内块元素时，IE6、7存在兼容性问题，会遮盖部分元素

 

以上说的都是水平方向上元素间的空隙解决方法，对于上下间距，可以使用vertical-align属性来设置