title: Unknown margin in vue js application
body: <p>I have generated a Vue.JS project and am having a problem.
  Actually, I would like App.vue to show on the whole page and my different routes to show in <strong>App.vue</strong> using router-view.</p>
  <p>However, when I try to put a margin on the content of my Game component, there seems to be a margin not on my <strong>Game</strong> component but on the <strong>App</strong> component.</p>
  <p>Here are my two <strong>&quot;.vue&quot;</strong> files below.</p>
  <p><strong>App.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot; class=&quot;bg-gray-500 h-full&quot;&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name:'App'
  }
  &lt;/script&gt;
  
  &lt;style&gt;
   
  &lt;/style&gt;
  </code></pre>
  <p><strong>Game.vue</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div id=&quot;game&quot;&gt;
              &lt;div class=&quot;bg-white rounded-lg p-6 w-1/2&quot; style=&quot;margin-top:10px&quot;&gt;
                  &lt;h1&gt;Hi&lt;/h1&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'Game'
      }
  &lt;/script&gt;
  
  &lt;style&gt;
      #game{
          margin : -0px !important;
          height: 100vh;
          top:0;
          background-color:red
      }
  &lt;/style&gt;
  </code></pre>
  <p>The problem is the little white bar at the top, which shouldn't be there but rather the white card which should have a margin-top of 10px<a href="https://i.stack.imgur.com/zgIO6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zgIO6.png" alt="Problem of margin" /></a></p>
  <p>EDIT (main.js file):</p>
  <pre><code>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 =&gt; h(App)
  }).$mount('#app');
  </code></pre>