4

enter image description here

Image

encountering white space at top of the react-app

Check the image

There's weird whitespace occurring at the top of the react-app. My developed app not even a big react-app but there something occupying the space there and creating a white space there. I have deleted the old project and did this new one thinking it'll remove my error but the same result. I'm using a routing package to route through my app react-route-dom. I tried all the possible ways but couldn't find out the error or the line of code that is triggering the white-space at the top of the react-app. Please anyone help I have to submit my project!.

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;
}
Abhinav peter
  • 41
  • 1
  • 2
  • 1
    look at your dev console and inspect the page - it could be paading on the body or margin on the h1 - browsers have default styling that you may not know – gavgrif Jan 18 '21 at 08:08

3 Answers3

11

Add this to your index.css :

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

This happens because chrome by default adds some padding to your page

Gayatri Dipali
  • 1,171
  • 4
  • 16
0

user agent stylesheet is doing that. For instance Chrome styles h1 by default like so:

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

This will create those margins you're complaining about. All you need to do is explicitly style your h1 in your CSS file. Something like this: h1{margin: 0px}. Do the same for the body.

Also note that If <!DOCTYPE> is missing in your HTML content oftentimes the browser gives preference to the "user agent stylesheet" over your custom stylesheet.

codemonkey
  • 7,325
  • 5
  • 22
  • 36
0

In my case, the space provoked the css property place-items: center from the index.css file.

Ihor
  • 131
  • 1
  • 2