After Vue creates a new project, there is always a blank at the top.

clipboard.png
clipboard.png

Vue-clihello div
style

html, body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px; }

html,body {


clipboard.png
also tried to add no response.

Mar.28,2021

the newly created project has a-sharpapp style in app.vue 's style, which seems to have a margin-top: 60px;, just remove this


Today, I also encountered this problem. First I looked for it on the Internet, but I couldn't find it. Later, I studied F12 and found that there was a gap between the body tag and html, so I tried to set the body tag to margin: 0; . Many methods can be changed through js, or you can directly add a style to the < body > tag in / public/index.html :

.
<body  style="margin:0;">
  <div id="app"></div>
</body>

the same problem just appeared, and the search found this old question.

F12 finds that the css margins have been removed, and there are still white edges on it, but when the content of the routing page is removed, the white edges are gone.

after thinking about it, it is found that the first element on the page is an H1, and its margin automatically pushes away the parent element for a period of time, so there is a white edge.
so setting the default style for h1-h6 is solved.


try * {margin: 0; padding: 0; }


is it padding written in app.vue


you first open right-click debugging to take a look at the style in this place, and then check the style in style in your app.vue, because I remember that style has a scope attribute indicating a local CSS,. You can check what the above buddies said to see what the problem is.


in App.js-sharpapp has a style

Menu