Vue.js 2 - 从body标签中删除初始边距

Question

如果这是一个愚蠢的问题，我很抱歉，我对Vue来说还是一个新手。我创建了一个Vue（带有命令vue init webpack <project-name>）项目并开始添加组件，其中第一个是导航栏。但后来我注意到body标签默认为margin: 8px，导致我的页面和浏览器四周之间总是有8px的空白区域。我不能为我的生活弄清楚如何摆脱这个边缘，我尝试使用以下css：

* { margin: 0 !important; }

和

body { margin: 0 !important; }

我已尝试将其直接添加到根index.html的样式标记中，并添加到我的所有组件中＆＃39;样式标签，但根本无法摆脱它。

Answer 1

看来我是个白痴。当我在索引的头部执行*{}规则时，在我开始编写问题之前，我从未真正包含!important，当我不记得!important是否在半开始之前或之后-结肠。所以在我在我的文本编辑器中编写它之后，复制到我的问题然后继续我，出于某种原因，保存了我的索引，你知道什么？有效。

总而言之，index.html头部的样式标签中的* { margin: 0 !important; }将起到作用。

Answer 2

这可能是由于“作用域”属性所致，请将其设置为0，这样就可以解决此问题。

Answer 3

以 #app 样式添加margin-top: -0px !important;效果很好。

Answer 4

在index.html中为body元素添加样式

<style> body { margin: 0 !important; } </style>

示例

Answer 5

删除边距对我不起作用。但是删除填充有效

<style>
     html,body { padding: 0 !important;}
</style>