奇怪的身体填充（VueJS + Nuxt，CSS）答案

【问题标题】：Strange body padding (VueJS + Nuxt, CSS)奇怪的身体填充（VueJS + Nuxt，CSS）
【发布时间】：2022-01-16 10:59:47
【问题描述】：

我有很少的 VueJS + NuxtJS，它有背景 gif。现在看起来像这样：

body {
  margin: 0 auto;
  background: url("assets/video/background-darked.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  @media only screen and (max-width: 860px) {
    overflow-y: scroll;
  }
}

你可以把它放在整个身体上，但我真的不需要它，这个背景 gif 应该只有几页，所以，如果将 body 更改为类名（比如说 main）并像这样使用这个类：

<template>
  <div class='main'>
    <Header />
  </div>
</template>

我会有奇怪的填充物：

我该如何解决这个问题？

【问题讨论】：

我们可能需要minimal reproducible example 或 github 存储库来有效地帮助您。最后，通过检查实际的 gif/body，它可能可以使用您的浏览器开发工具修复。

标签： javascript html css vue.js nuxt.js

【解决方案1】：

假设显示的模板是渲染的根组件...

将这些样式从 body 移动到类名会默认 <body> 的样式使用基于用户代理的默认边距，这可能是您提到的“奇怪的填充”的原因。

如果您想保留更改之前的原始边距，请仅保留 margin 样式：

// MyPage.vue
<style>
body {
  margin: 0 auto;
}

.main {
  background: url("assets/video/background-darked.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  @media only screen and (max-width: 860px) {
    overflow-y: scroll;
  }
}
</style>

【讨论】：