如何删除 create-react-app 中的默认边距？ [复制]答案

【问题标题】：How to remove the default margin in create-react-app? [duplicate]如何删除 create-react-app 中的默认边距？ [复制]
【发布时间】：2021-09-15 16:56:51
【问题描述】：

我使用create-react-app 命令制作了一个新应用。我删除了src 文件夹中的大部分文件。所以现在我的文件夹看起来像这样：

index.js有

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

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

而App.js 包括

import React from 'react'

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

export default App;

现在，当我运行 yarn start 并转到我的浏览器时，它显示：

问题：您可以清楚地看到“Hello World”文本的一些左边距。这是为什么？我没有包含任何 CSS 文件！还有，怎么去掉？

【问题讨论】：

检查它，看看它从哪里获取样式。

标签： css reactjs create-react-app margin

【解决方案1】：

试试：

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

【讨论】：

【解决方案2】：

这是因为默认浏览器 CSS。您可以使用以下代码重置它们。

* {
  margin: 0;
  padding: 0;
}

您可以将此 CSS 代码添加到您的全局 CSS 文件中。

【讨论】：

【解决方案3】：

您实际上是在问如何删除body 元素的默认样式margin: 8px。

有很多方法，最简单的可能是规范化并将其导入index.js。

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

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

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

【讨论】：