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

原创于 2018-08-27 14:33:59 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

17 篇文章

订阅专栏

博客介绍了去除间距的三种解决方法，其中第三种方法涉及html层面，并提供了详细参考链接https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/ 。

<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/