行内元素之间出现空白间隙及解决办法

这里的行内元素包括 display 为 inline 和 inline-block 的元素。

基本布局

<div class="container"><span class="item">1</span><span class="item">2</span><span class="item">3</span>
</div><style>.container .item {display: inline-block;padding: 2px 8px;border: 1px solid #ccc;}
</style>

效果

产生间隙的原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据 white-space 的处理方式（默认是 normal ，合并多余空白），所以元素之间就出现了空隙。并且行内元素之间的间距会随着字体的大小而变化，当行内元素 font-size:16px 时，Chrome 浏览器的间距为 8px 。

对 Vue 开发的影响

在 Vue 开发中，如果是在模板语法中，效果跟在 html 中一致，行内元素会出现空白间隙。

<div class="container"><span class="item">1</span><span class="item">2</span><span class="item">3</span>
</div>

new Vue({el: '.container',data() {return {}}
})

如果是在单文件组件中，行内元素就不会出现空白间隙。

<template><div class="container"><span class="item">1</span><span class="item">2</span><span class="item">3</span></div>
</template><script>
export default {data() {return {};},
}
</script><style lang="less" scoped>
.container {.item {display: inline-block;padding: 2px 8px;border: 1px solid #ccc;}
}
</style>

解决办法

方法1：行内元素写在一起，不要换行或加空格。

方法2：父元素的 font-size 设置为 0，子元素单独设置 font-size。

方法3：让行内元素浮动起来。

方法4：父元素开启 flex 或 grid 布局。