Vite로 프로젝트 생성 후 height: 100vh를 적용했지만 전체 margin이 8px 적용되어 있는 것을 알게 되었다.
vite로 초기 프로젝트를 생성하면 기본적으로 margin이 8px 생긴다고 한다. margin을 없애보자.
CSS 파일 만들기
이를 없애려면 index.css 파일에 코드를 추가해야한다.
#root{
// 기존에 쓰인 코드
}
body{
margin: 0,
}
index.html 파일에 style 설정하기
index.html 안에 <style> 영역에 직접 margin을 0으로 설정하는 방법도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<style>
body {
margin: 0px;
}
</style>
</html>
참고
https://velog.io/@hyorish03/Vite-VITE%EC%9D%98-%EA%B8%B0%EB%B3%B8-margin-%EC%97%86%EC%95%A0%EA%B8%B0
https://snowdeer.github.io/vuejs/2022/04/05/vuejs-remove-default-margin/
