如何解决在 react-app 顶部遇到空白
图片
在 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;
}
解决方法
将此添加到您的 index.css :
*{
margin: 0;
padding: 0;
box-sizing: border-box; // not neccesary
}
发生这种情况是因为默认情况下 chrome 会向您的页面添加一些填充
,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>
,浏览器通常会优先使用“用户代理样式表”而不是您的自定义样式表。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。