Vue.js 2 - 从正文标签中删除初始边距答案

【问题标题】：Vue.js 2 - Remove initial margin from body tagVue.js 2 - 从正文标签中删除初始边距
【发布时间】：2018-06-22 18:49:10
【问题描述】：

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

* { margin: 0 !important; }

和

body { margin: 0 !important; }

我尝试将它直接添加到样式标签中的根 index.html 的头部以及我所有组件的样式标签中，但就是无法摆脱它。

【问题讨论】：

标签： html css vuejs2

【解决方案1】：

看来我是个白痴。当我在索引头中执行*{} 规则时，我实际上从未包含!important，直到我开始写我的问题，当时我不记得!important 是在分号之前还是之后。因此，在我在文本编辑器中编写它之后，复制到我的问题然后继续，出于某种原因，我保存了我的索引，你知道什么？有效。

总之，index.html 头部的样式标签中的* { margin: 0 !important; } 可以解决问题。

【讨论】：

你有更好的解决方案吗？另外，我最终将* 更改为body。
body { margin: 0; } 完成了这项工作。如果您的项目中没有，您需要调查原因。
@connexo 我认为你是对的，这比 * 建议的要好。通过使用星号，我删除了所有标签中的所有边距。我不想那样，我认为 OP 也只要求删除“初始”边距。所以谢谢。
您可以简单地将 {display: flex} 放在主组件的

【解决方案2】：

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

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

例子

【讨论】：

【解决方案3】：

这可能是因为“作用域”属性，在您将正文边距设置为 0 的位置将其删除，它应该可以解决。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：