Javascript vue js应用程序中的未知边距
我生成了一个Vue.JS项目,遇到了一个问题。 实际上,我希望App.vue显示在整个页面上,并使用路由器视图在App.vue中显示我的不同路线 但是,当我尝试在游戏组件的内容上添加边距时,似乎在游戏组件上没有边距,而是在应用程序组件上有边距 下面是我的两个“.vue”文件 App.vueJavascript vue js应用程序中的未知边距,javascript,html,css,vue.js,vuejs2,Javascript,Html,Css,Vue.js,Vuejs2,我生成了一个Vue.JS项目,遇到了一个问题。 实际上,我希望App.vue显示在整个页面上,并使用路由器视图在App.vue中显示我的不同路线 但是,当我尝试在游戏组件的内容上添加边距时,似乎在游戏组件上没有边距,而是在应用程序组件上有边距 下面是我的两个“.vue”文件 App.vue <template> <div id="app" class="bg-gray-500 h-full"> <router-vi
<template>
<div id="app" class="bg-gray-500 h-full">
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style>
</style>
<template>
<div>
<div id="game">
<div class="bg-white rounded-lg p-6 w-1/2" style="margin-top:10px">
<h1>Hi</h1>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Game'
}
</script>
<style>
#game{
margin : -0px !important;
height: 100vh;
top:0;
background-color:red
}
</style>
我怀疑它在
主体
元素上,而不是在您的组件中。
尝试添加
边距:0代码>查看。谢谢你的回答,我刚试过,但还是没有,这很奇怪。此外,余量:-0px
不会做任何事情,不妨简单地将其设置为边距:0代码>我们可能需要查看整个代码或更好的代码,以及活动示例来进一步研究它。如果可能的话,我编辑了我的帖子,以显示我项目中的最后一个文件main.js。除了配置文件,我没有其他东西。我也在使用“tailwindcss”CSS框架,但点击inspect元素,我看不到任何可以解释这个边距的东西。这就是为什么我认为这是vue中的一个问题。老实说,这可能不是vue的错,许多HTML元素都有默认的填充、边距等,这可能与此有关。
import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/tailwind.css'
import VueCookies from 'vue-cookies'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueCookies)
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
routes: [
{path: '/home', component: require('./components/Home.vue').default},
{path: '/', component:require('./components/Game.vue').default}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');