【Vue-CLI】body margin 8px を解決する

はじめに

　最近Vue-cliを触り始めて、以下の赤矢印で示すような余白ができてしまうことがあった。

　chromeの検証から見るとbody要素に強制的にmargin 8pxが入っている。そして、.vueファイル側で以下のように指定しても解決しない。

<style scoped>
...
body {
  margin: 0;
}
...
</style>

原因

　chromeだとbody要素に強制的にmargin 8pxが入ってしまうことが原因。その他の要素でもmarginを入れているらしい。ちなみに開発ツールからも触ることができない。.vue側で効かないところまでは不明（ブラウザ側のvueの扱いだと思うのだが）。

解決方法

　解決方法としてはいくつかあると思うが、今回はindex.html側にcssを記載することで解決する方法を紹介する。

index.html

...
<style>
body {
    margin: 0px;
}
</style>

　chrome側でその他要素やpaddingも自動で設定しているらしいので、以下のように一旦すべてリセットした方が自分の思った通りのcssになりやすいとか。

index.html

...
<style>
* {
    margin: 0px;
    padding: 0px;
}
</style>

おわりに

こちらを参考。