I'm using next.js and getting unnecessary top margin in index.js

Question

I'm using next.js and created this project using

yarn create next-app

And below is the bare minimum code. I don't know why

h1, h2, h3, h4, h5, h6, p all tags are having default margin top in 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>
    );
  }
}

Index.module.css

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

global.css

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;
}

@nadz yes now it's working but can you tell me why? because I have not mentioned the top margin for the h1 tag? is it default value in next.js — Hemendra Khatik, Mar 14 '21 at 18:01

nad · Accepted Answer · 2021-03-14T18:30:07.467

0

It's due to a margin collapse issue. You can read more about it here. To avoid it you can use the css padding property.

EDIT

You can use the padding property in place of the margin property like so:

h1 {
    padding-top: 20px
}

edited Mar 14 '21 at 18:30

answered Mar 14 '21 at 18:09

nad

1,068
6
16

can you give a code example where to use padding property ? – Hemendra Khatik Mar 14 '21 at 18:27
@HemendraKhatik check the edited answer. – nad Mar 14 '21 at 18:30
in my case margin-top: 0; is working but padding-top: 20px is not working – Hemendra Khatik Mar 14 '21 at 18:33
Then try applying the padding to the parent. `.container { padding-top: 20px; }` – nad Mar 14 '21 at 18:35

I'm using next.js and getting unnecessary top margin in index.js

tag has gotten a top margin to it.

1 Answers1