关于 display:inline-block间隙问题

楼主^#

更多发布于：2016-12-30 21:17

display:inline-block布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙，那是正常的。
常见的解决方法：
1：去除标签段之间的空格，但是会导致HTML标签可读性差
2：使用margin、word-spacing、letter-spacing负值：负值的大小与上下文的字体和文字大小相关，外部环境的不确定性，以及最后一个元素多出的父值等问题，这个方法不适合大规模使用
3：标签写成不闭合，省掉尾标签</a>
4：使用font-size:0,最好的方法父元素font-size:0; 他的作用便是让多余的空白符消失，当然这会造成所有子元素的文本都一同消失，因此你需要再在子元素加一个font-size:12px。

喜欢0