'Can't remove margins on react web app
I am having trouble removing these huge white margins on my react project. Below are some of the solutions I have tried.
* { margin: 0; padding: 0; }
/-/-/-/
body {
max-width: 2040px;
margin: 0 auto;
padding: 0 5%;
clear: both;
}
I have tried every variation. My only installed dependencies that should affect anything CSS wise is bootstrap and I don't think thats it. I tried adjusting max-width
to a value of 2040px
just to test if it would work and there appears to be a limit to which I can set the width. Help would be appreciated.
I should also mention that this is persistent throughout the entire page. This issue is not limited to the background image which I am linking in the css
file
White Margins
Solution 1:[1]
All the browsers uses different default margins, which causing sites look different in the other browser.
The *
is wildcard
, means all elements
present in our site (consider as universal selector), so we are setting each and every element in our site to have zero margin, and zero padding, to make the site look the same in every browsers.
If your style not getting applied then you can use !important
to override style,
* {
margin: 0 !important;
padding: 0 !important;
}
Solution 2:[2]
If you created it using create-react-app there will probably be a file public/index.html
.
There is a tag wrapped around the root where React will inject you App.
Usually the browser style-sheet set the margin of <body>
to 8px.
That's most likely that white margin around your App that you're struggling to get rid off.
To remove it, one option is to open public/index.html
and set the margin to 0 using inline styles like this:
<body style=margin:0>
In case you're using @emotion/react
for styling you may alternatively (still assuming that there is this body tag in public/index.html
) leave it as <body>
and use the <Global>
component to define styles for <body>
. Something like this in your App.js
:
function App() {
return (
<div>
<Global
styles={css`
body {
margin: 0;
}
`}
/>
<Your />
<Other />
<Components />
</div>
);
}
export default App;
Solution 3:[3]
User agent style sheet overrides the custom style. You can override this using !important in normal html and css
It is better to user react spacing library, rather than overriding the user default style sheet https://material-ui.com/system/spacing/
or you can use the following
<body id="body">
<div id="appRoot"></div>
</body>
style sheet
body
margin: 0
padding: 0
button
padding: 10px 20px
border-radius: 5px
outline: none
React JS code blocks
class A extends React.Component{
componentWillMount(){
document.getElementById('body').className='darktheme'
}
componentWillUnmount(){
document.getElementById('body').className=''
}
render(){
return (
<div> Component A </div>
)
}
}
class App extends React.Component{
constructor(){
super()
this.state = {
isAMount: false
}
}
handleClick(){
this.setState({
isAMount: !this.state.isAMount
})
}
render(){
return (
<div>
<button onClick={this.handleClick.bind(this)}> Click Me</button>
<div> App </div>
<hr />
<div> {this.state.isAMount && <A /> } </div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('appRoot'))
Solution 4:[4]
As you are using background image. Its problem due to image size ratio.
You have to use background-size: cover property in css.
Also use appropriate background-position to make sure the gavel comes in center bottom of page.
Solution 5:[5]
I was trying to add a background image in my react app but react left some margin on top and left.
const useStyles = makeStyles((theme) => ({
background: {
backgroundImage: `url(${Image})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
width: '100vw',
height: '95vh',
}
After reading the documentation, I realized that it was not margin, but positioning of the image. Setting the position:fixed
with top:0
and left:0
fixed the issue.
Solution 6:[6]
After reading the answers above and trying them I have concluded that the best way is to keep your index.css(note: that the index.css in particular has the margins already set to 0 globally.) and App.css files that are auto generated when you "npx create-react-app".
I have noticed that many beginner tutorials tell you to remove these files and more, but after facing this problem it is honestly easier to just edit the boilerplate than start from scratch.
Solution 7:[7]
If you try:
* {
margin: 0 !important;
padding: 0 !important;}
You may have some issues. As I was using some mui, so this was distorting my components. I may recomend to modify the "body" in public/index.html using:
<body style=margin:0>
Solution 8:[8]
* { margin: 0; padding: 0; }
override by browser.
try
html,body{
margin:0;
padding:0;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | ravibagul91 |
Solution 2 | |
Solution 3 | Balaji.J.B |
Solution 4 | Miral Sojitra |
Solution 5 | yash1709 |
Solution 6 | WiseBear |
Solution 7 | Ricardo Kreutzer |
Solution 8 | Amit |