【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>

결론

여기 참고.