消除inline-block产生的元素间空隙

<!-- HTML代码 -->
<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>
/* css代码 */
.child {display:inline-block;background-color:#ccc;}

浏览器中显示的结果.png

虽然四个块状子元素排在了一行，但是子元素之间却留有空隙！

产生的原因：

HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

解决办法：

• 方法一：改变html结构

结构1

<div class="parent">
    <div class="child">
      child</div><div class="child">
      child</div><div class="child">
      child</div><div class="child">
      child</div><div class="child">
      child</div>  
</div>

结构2

<div class="parent">
    <div class="child">child</div
    ><div class="child">child</div
    ><div class="child">child</div
    ><div class="child">child</div
    ><div class="child">child</div>  
</div>

结构3

<div class="parent">
    <div class="child">child</div><!--
  --><div class="child">child</div><!--
  --><div class="child">child</div><!--
  --><div class="child">child</div><!--
  --><div class="child">child</div>  
</div>

结构4

<div class="parent">
    <div class="child">child</div><div class="child">child</div><div class="child">child</div><div class="child">child</div><div class="child">child</div>  
</div>

• 方法二：设置负的margin值
• 方法三：设置父元素的font-size:0;
• 方法四：设置父元素的word-spacing

.finally-solve {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;
}
.finally-solve li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
}

摘自sf 如何解决inline-block元素的空白间距