How to remove the default margin in create-react-app?

Question

I made a new app using the create-react-app command. I removed most of the files in the src folder. So now my folder looks like this:

index.js has

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

And App.js includes

import React from 'react'

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

Now, when I run yarn start and go to my browser, it shows:

Question: You can clearly see some left margin given to the 'Hello World' text. Why is that? I have included no CSS file whatsoever! Also, how do I remove it?

Answer 1

It's because of default browser CSS. You can reset these using the following code.

* {
  margin: 0;
  padding: 0;
}

You can add this CSS code to your global CSS file.

Answer 2

You are actually asking how to remove the default style margin: 8px of the body element.

There are a lot of approaches, simplest might be normalizing and import it within index.js.

// styles.css
body {
  margin: 0;
}

// index.js
import "./styles.css";

https://codesandbox.io/s/reverent-volhard-58kzp?file=/src/index.js

Answer 3

Try:

body, html {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* Not supported in IE 6 & IE 7 */
}