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?

Inspect it and see where it's getting styles from. – jmargolisvt Jul 04 '21 at 17:25 — jmargolisvt, Jul 04 '21 at 17:25

Ibrahim Hasnat · Accepted Answer · 2021-07-04T17:32:40.313

13

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.

edited Jul 04 '21 at 17:32

answered Jul 04 '21 at 17:26

Ibrahim Hasnat

935
1
8
16

score 2 · Answer 2 · answered Jul 04 '21 at 17:27

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

score 0 · Answer 3 · answered Jul 04 '21 at 18:23

0

Try:

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

answered Jul 04 '21 at 18:23

Kevin M. Mansour

2,915
6
18
35

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

3 Answers3