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

这里的行内元素包括 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 布局。