inline-block按行排列有3px的误差

 

<div class="line">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>

1.解决方法一 

.line {
    font-size: 0
}
.item {
    font-size: 12px
}

2.解决方法二

.line {
    letter-spacing: -8px;
}
.item {
    letter-spacing: 0;
}

 3.解决方法三（html层面）

<div class="line">
    <span class="item"
    ></span><span class="item"
    ></span><span class="item"
    ></span>
</div>

详细参考：https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/