I have a project that was created using the command vue init webpack my-project.
Here is my main.js file:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
and my App.vue file:
<template>
<div id="app">
<div id="text">{{ text }}</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
text: 'Unique text goes here.'
}
}
}
</script>
<style lang="scss">
.html, .body {
margin: 0px !important;
padding: 0px !important;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0 auto;
padding: 0px;
}
#text {
margin: 0 auto;
padding: 0px;
width: 50%;
}
h1 {
font-weight: normal;
}
</style>
When I run my site using npm run dev and inspect the elements in Chrome, I notice that the <body> class has a margin:
https://i.sstatic.net/5aT3J.png
I have attempted to remove all margin and padding from the <html> and <body> elements but it is not working as expected.
What am I overlooking?