消除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元素的空白间距

推荐阅读更多精彩内容