Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command:

yarn create next-app

However, I noticed that all heading and paragraph tags in my code have default top margins 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;
}


https://i.stack.imgur.com/866c1.png

Answer №1

It seems like there is an issue with margin collapse causing this problem. For more information on margin collapse, you can refer to this article. To prevent this issue, you can utilize the css padding property.

UPDATE

You can substitute the margin property with the padding property as shown below:

h1 {
    padding-top: 20px
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The GET request on the Express route is malfunctioning, causing the Postman request to time out after getting stuck for some

My Express app seems to be experiencing some issues with the GET route. When making a request using Postman, the response gets stuck for a while before fetching. The GET route is properly set up with all necessary request parsers and the app initialized an ...

Creating a seamless integration of Material UI V5 ThemeProvider in Storybook V6 within the NX workspace involves a series

I am currently utilizing nx.dev as my monorepo setup with various React clients. With NX, I have centralized the configuration for Material Ui inside the lib folder. The issue arises when I try to integrate Storybook within the mui folder. Unfortunately, ...

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

Is there a way to align these side by side?

Is it a silly question? Perhaps. But I can't seem to figure out how to align my text and colorpicker on the same line instead of two. Take a look at my fiddle. I've tried removing display:block and clear:both, but that didn't do the trick. H ...

Column flexbox self is not functioning properly with text ellipsis

Is there a way to apply text-overflow: ellipsis to a flexbox element? I know I need to set the width and overflow: hidden, but how can I achieve the ellipsis effect within the grey block when the text overflows? Removing the flexbox property from the < ...

Disabling the slide effect in Material UI Slide component by adjusting its behavior according to the component's state

Incorporating a menu into a Slide component has been quite a challenge. Here's the code I've been working on: return( <Slide direction="down" in={showNavState} > <AppBar position="absolute" className={classes.bgColor} > ...

Activate expansive pop-up windows with primeng's dynamic dialog feature

In my Angular web application, I am using the PrimeNg modal extension to display modal popups. I have successfully passed a component to the modal service with the following code: const ref = this.dialogService.open(LogsComponent, { data: { ...

In what way can the result of the code displayed be considered as truthful?

this.someService.findDevices() .subscribe((segments) => { this.segments = Array.from(segments.segments); this.packs.forEach((pack) => { pack.segments = Array.from(segments.segments); pack. ...

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

summing up the initial elements from every array generated dynamically

My data is structured as follows: { "questions": ["Variety of food options", "Food quality", "Freshness of food"], "countries": ["Netherlands", "Belgium", "France"], "values": [ [ [5, 88, 18], [50, 83, 10], ...

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

Creating a Google Inbox-style drawer using Material-UI: A step-by-step guide

I am currently developing an application using Meteor, React, and Material-UI. A custom left navigation component based on Drawer has been implemented. class LeftNav extends Component { constructor(props){ super(props); } render() { ...

Positioning an individual element to the right side of the navigation bar in Bootstrap 5

I've been attempting to shift a single nav-item to the right side of the navbar, but I'm having trouble. My navbar is fairly basic, without a search tool or dropdown menu, as seen below: <nav class="navbar navbar-expand-lg bg-body-tertiar ...

.scss compiling with errors

Recently, I embarked on a new Vue(3) project. Within this project, I have set up some basic styling in the App.scss file and created a HomeView.vue with a corresponding HomeView.scss file (located in the /src/views/Home directory). The styling from both fi ...

When do Angular.js memory leaks become a cause for concern?

My application is quite large, built on angular with nested states, directives, and data tables. We recently decided to switch to a full single-page setup, which raised some performance concerns. While Chrome seems unaffected visually, Firefox appears to s ...

JavaScript issue: Shallow copy does not reflect updates in nested JSON object

Within my coding project, I came across a nested JSON object that looks like this: var jsonObj = { "level1" : { "status" : true, "level2" : {} // with the potential to extend further to level 3, 4, and beyond } } My objective is si ...

Eliminate the flickering effect on the dropdown menu

Is there a way to eliminate the annoying 'flicker' effect on my menu? Whenever I click on 'Dropdown 1', I notice that Test 1 and Test 2 flicker. My assumption is that this is due to my use of the !important declaration. Any suggestion ...

Using React and Jest to mock a default function imported from an npm package

I am attempting to mock the "readXlsxFile" function from the npm package "read-excel-file". My issue is most likely with the line jest.spyOn(readXlsxFile, "default"). I have tried various async/await combinations and also used the "act" method from react t ...

Next.js has shifted away from pre-generating page HTML

I have been working on a Jamstack application using Next.js, and I recently realized that the pages stopped pre-generating the HTML content without me noticing it at first. The pages still load fine, but there is no pre-generated HTML. Even the simplest c ...

Ways to utilize/extract data from an enumeration

Hello there! I am currently diving into the world of React and Typescript, eager to expand my knowledge. Please bear with me if my explanations are not up to par. In my react app, I have a scenario where I created an enum that I want to utilize in two diff ...