在react-app顶部遇到空白

Question

输入图片描述

在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;
}

Answer 1

添加到index.css:

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

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

Answer 2

用户代理样式表正在这样做。例如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}。对body执行同样的操作。

还要注意，如果HTML内容中缺少<!DOCTYPE>，浏览器通常会优先使用"用户代理样式表"。

Answer 3

在我的例子中，空格激发了index.css文件中的css属性place-items: center。