Vue.js 2 - Remove initial margin from body tag

Question

My apologies if this is a stupid question, I'm still pretty new to Vue. I created a Vue (with the command vue init webpack <project-name>) project and started adding components, the first of which is a navbar. But then I noticed that the body tag has margin: 8px by default which causes there to always be a 8px white space between my page and the browser on all sides. I can't for the life of me figure out how to get rid of this margin, I've tried using the following css:

* { margin: 0 !important; }

And

body { margin: 0 !important; }

I've tried to add this directly into the root index.html's head in style tags and into all my components' style tags but simply can't get rid of it.

Answer 1

It seems I was an idiot. When I did the *{} rule in my index's head, I never actually included !important until I started writing my question, when I didn't remember if the !important goes before or after the semi-colon. So after I wrote it in my text editor, copied to my question and then carried on I, for some reason, saved my index and what do you know? It worked.

So in conclusion, * { margin: 0 !important; } in style tags in the index.html's head will do the trick.

Answer 2

Add style for body element in index.html

<style> body { margin: 0 !important; } </style>

example

Answer 3

That's probably because of the "scoped" attribute, remove it in the place where you're setting body margin to 0 and it should work out.

Answer 4

Removing margin didn't work for me. But removing padding worked

<style>
     html,body { padding: 0 !important;}
</style>

Answer 5

Add margin-top: -0px !important; in #app style works well.

Answer 6

I am using vue3 and I had the same problem. To solve such a problem you can try that: In public/index.html set id="index" to the body tag and then just define the id as follows:

<style lang="scss">
#index {
  margin: 0px !important;
}
</style>

enter image description here