Using vue.js, I created a page called index.vue which includes the components header.vue and home.vue:
The code for 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>
However, there is an unexpected space between the header component and the home component.
When examining their box model:
You can see that both components have no margin, padding, or border. So, why is there space between them?