两个div中没有​​`margin`，`padding`和`border`，为什么它们之间有空格？

Question

我使用vue.js创建一个页面（index.vue），有header.vue和home.vue：

index.vue代码：

<template>
  <div class="index">
    <i-header></i-header>
    <router-view></router-view>
    <i-footer></i-footer>
  </div>
</template>

<script>

  import Home from './首页/home.vue'
  import Header from '../components/header/header.vue'
  import Footer from '../components/footer/footer.vue'


  export default {
    methods: {

    },

    components: {
      'home':Home,
      'i-header': Header,
      'i-footer': Footer
    }
  };
</script>

<style scoped>

  .index {

  }

</style>

但header组件与home组件之间存在空格。

请参阅box模型：

First

Second

你看，它们都没有margin，padding和border，为什么它们之间有空格？

Answer 1

首先，您应该检查项目中是否有标准化，因为空白区域可以来自内联块，也可以由浏览器添加到特定标记。  2.你应该检查你的标题标签子元素，因为它们可以有一些边距。  3.如果您发送一些具有浏览器中完整结构和样式的代码，也会更好。