在 react-app 顶部遇到空白答案

【问题标题】：Encountering white-space at top of react-app在 react-app 顶部遇到空白
【发布时间】：2021-01-18 08:00:33
【问题描述】：

图片

在 react-app 顶部遇到空白

检查图片

react-app 的顶部出现了奇怪的空白。我开发的应用程序甚至不是一个大的反应应用程序，但有一些东西占据了那里的空间并在那里创造了一个空白空间。我删除了旧项目并做了这个新项目，认为它会消除我的错误，但结果相同。我正在使用路由包通过我的应用 react-route-dom 进行路由。我尝试了所有可能的方法，但找不到错误或触发 react-app 顶部空白的代码行。请任何人帮助我提交我的项目！

App.js

import React from 'react'
import './App.css'; 
  function App() {
  return (
   <div className="App">
    <h1>Hello</h1>
   </div>
 );
}export default App

App.css

.App {
 text-align: center;
 background: red;
 height: 30%;
 }

Index.js

        import ReactDOM from 'react-dom';
         import './index.css';
      import App from './App';
   import reportWebVitals from './reportWebVitals';
      import { BrowserRouter } from 'react-router-dom'
         const app = <BrowserRouter><App/></BrowserRouter>
           ReactDOM.render(
       <React.StrictMode>
         {app}
      </React.StrictMode>,
        document.getElementById('root')    );
       reportWebVitals()




**index.css**

  body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #333;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

【问题讨论】：

查看您的开发控制台并检查页面 - 它可能在 h1 的主体或边距上填充 - 浏览器具有您可能不知道的默认样式

标签： reactjs npm-install

【解决方案1】：

将此添加到您的 index.css ：

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box; // not neccesary
}

这是因为默认情况下 chrome 会为您的页面添加一些填充

【讨论】：

那么别忘了接受那些对你有帮助的答案并点赞

【解决方案2】：

user agent stylesheet 正在这样做。例如 Chrome 样式 h1 默认如下：

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

这将产生您抱怨的利润。您需要做的就是在 CSS 文件中明确设置 h1 的样式。像这样的东西：h1{margin: 0px}。对身体做同样的事情。

另请注意，如果您的 HTML 内容中缺少 <!DOCTYPE>，通常浏览器会优先使用“用户代理样式表”而不是您的自定义样式表。

【讨论】：