Vue：新项目，app div周围有边距，如何去除空格答案

【问题标题】：Vue: new project, app div has margin around it, how to remove blank spaceVue：新项目，app div周围有边距，如何去除空格
【发布时间】：2022-02-10 18:48:40
【问题描述】：

我在一个全新的Vue 项目中有这段代码：

App.vue：

<template>

  <div id="app">
    <p>hey</p>
  </div>

</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  background-color: red;

  margin: 0px !important;
}
</style>

看起来像这样：

可以看出，appdiv 的顶部和左侧和右侧都有空白区域。如何删除它，使其看起来像这样：

编辑：

添加

body  {
  padding: 0 !important;
  margin: 0 !important;
}

导致：

【问题讨论】：

body { padding: 0; margin: 0 } — 您可能需要覆盖默认浏览器样式。
@KirkBeard 添加了它，同样的输出
@KirkBeard 添加margin 适用于水平空间（见编辑）

标签： html css

【解决方案1】：

你可以试试这个：

body {
  margin: 0px !important;
}
p {
  background-color: red;
  margin: 0px !important;
}

<div id="app">
   <p>hey</p>
</div>

【讨论】：