Javascript I'；我使用next.js并在index.js中获得不必要的上边距

我正在使用next.js并使用

yarn create next-app

下面是最简单的代码。我不知道为什么

h1、h2、h3、h4、h5、h6、p所有标记在next.js中都有默认的页边距顶部

index.js

import React, { Component } from "react";
import styles from "../styles/Index.module.css";

export default class index extends Component {
  render() {
    return (
      <div className={styles.container}>
        <h1>Hello world</h1>
      </div>
    );
  }
}

.container{
    background-color: aqua;
    min-height:100vh;
    width:100%;
}

html,
body {
  padding: 0px;
  margin: 0px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

global.css

import React, { Component } from "react";
import styles from "../styles/Index.module.css";

export default class index extends Component {
  render() {
    return (
      <div className={styles.container}>
        <h1>Hello world</h1>
      </div>
    );
  }
}

.container{
    background-color: aqua;
    min-height:100vh;
    width:100%;
}

html,
body {
  padding: 0px;
  margin: 0px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

---

这是由于保证金崩溃的问题。你可以阅读更多关于它的内容。 要避免这种情况，可以使用css

padding

属性

编辑

可以使用padding属性代替margin属性，如下所示：

h1 {
    padding-top: 20px
}

---

检查标签是否有上边距。@nadz是的，现在它正在工作，但你能告诉我为什么吗？因为我没有提到h1标签的上边距？它是next.js中的默认值吗？你能给出一个代码示例，在哪里使用padding属性吗？@HemendraKhatik检查编辑过的答案。在我的例子中，页边空白顶部：0；正在工作，但填充顶部：20px不工作。请尝试将填充应用于父级

.container{padding top:20px；}