Why do I have a weird padding at the top when I'm using a custom app.js and document.js?

[helloitsm3]

Here's my code in index.js

import React from "react";

export default function Index() {
  return (
    <div style={{ backgroundColor: "red" }}>
      <h1>NextJS</h1>
    </div>
  );
}

[brunocrosier]

This is probably because h1 tags come with a margin by default in Chrome

You can inspect the h1 element and see it will have some margin

You can use a "CSS Reset" like this one in order to reset all these values

DM me if you need more help :)

[helloitsm3]

Thanks for replying. I manage to fix that. CSS wasn't resetted even though I refreshed the page. Had to manually hard refresh the page to reset the CSS. Thanks for your help

[brunocrosier]

Great - please go ahead and mark this as resolved :)

[timneutkens]

Did it for you 🙏 thanks for answering.