当多个连续的inline-block元素水平方向排列时，各个元素之间会出现空白间隔，这是由于空白字符（空格或换行）引起的。

HTML

<div id="container">
    <div class="cell">cell1</div>
    <div class="cell">cell2</div>
    <div class="cell">cell3</div>
    <div class="cell">cell4</div>
</div>

CSS

#container {
    background: #bbada0;
    width: 215px;
    padding: 10px;
}
#container .cell {
    width: 50px;
    height: 25px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    background: #cdc1b4;
    text-align: center;
}

效果是这样的:

有时候因为实际布局需要，或者为了避免不必要的影响，必须去除空白，下面总结了几种常用的解决方案：

• 移除空白字符，全部写在同一行

  <div id="container">
    <div class="cell">cell1</div><div class="cell">cell2</div><div class="cell">cell3</div><div class="cell">cell4</div>
  </div>
  

• 改变换行的位置

  <div id="container">
    <div class="cell">
    cell1</div><div class="cell">
    cell2</div><div class="cell">
    cell3</div><div class="cell">
    cell4</div>
  </div>
  

• 设置父元素的font-size为0，再为每个inline-block对象设置font-size的值

  #container {
    background: #bbada0;
    width: 215px;
    padding: 10px;
    font-size: 0;
  }
  

  最终效果是这样的: