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

news2024/10/6 0:28:12

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