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元素標籤改爲行內元素或行內塊元素時，IE六、7存在兼容性問題，會遮蓋部分元素

 

以上說的都是水平方向上元素間的空隙解決方法，對於上下間距，可使用vertical-align屬性來設置