使用vue生成的页面顶部会出现较多的空白区域，如何解决？

使用vue生成的页面顶部会出现较多的空白区域，如何解决？
问题如截图所示：

//    App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

//    HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

*{
 margin:0;
 padding:0
}

定位一下样式，修改默认样式

修改一下

 <HelloWorld ></HelloWorld >

的代码样式 即可

谢谢大家。问题已经解决了。在index.css 中
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 10px;
}
改 margin-top即可

这个布局的话他是通过弹性盒子布局，直接将这些元素垂直居中对齐了，你去找到他的css文件修改即可
找不到的话，你可以删除这个然后自己重新写就好了
最好在App.vue文件中的样式上写,写下面的可以清除元素的自带内外间距

*{
margin:0;
padding:0;
}