inline-block横向排列元素间隔原因及去除间隔方法

最新推荐文章于 2020-11-08 22:18:53 发布

原创最新推荐文章于 2020-11-08 22:18:53 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #布局

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在HTML布局中，使用inline-block属性横向排列元素时遇到的间隔问题。当元素之间存在换行或空格，会导致间距出现。解决方法是通过设置父容器的font-size为0来消除间隔，并利用padding和box-sizing属性实现元素间的间距。示例代码展示了如何正确布局三个img元素，使其并排显示并保持固定间隔。

1.问题出现的场景：

需要实现上面的布局，三张图横向排列，左图靠左，右图靠右，中间图居于中间，且图与图之间有固定间隔，起初通过如下方式实现(为了说明方便，直接通过内联样式表现)：

</div>

该实现方式，通过float来控制左右两侧图靠两边停放，中间图通过计算三张图总宽96%，剩余4%，这4%需要分为两部分来实现与左右两边图之间的间距，因此，对中间图通过margin-left:34%来控制其与左右两边图的间距为2%

2.不想通过float来实现，想通过控制每个img的容器div宽度为33.33333%来平分宽度，同时控制该容器具有padding值来达到中间图和两边图的间距，即：

</div>

这样实现后，发现三个img的容器div没有设置任何margin和padding，可是图片不能放在一行显示，第三个图被挤到第二行，且图和图之间是有间隔的，经过上网查找原因及解决方法，发现真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，最终使用了给最外部父容器设置font-size:0的方法来去除inline-block排列之间的间隔，同时空过属性padding和border-box来实现间距，最终实现方式为如下：

</div>